当前位置：首页 > JavaScript

js 实现legend

2026-02-01 01:19:06JavaScript

实现 Legend 的方法

在 JavaScript 中实现图例（Legend）通常涉及数据可视化库（如 D3.js、Chart.js 或 ECharts）或手动绘制。以下是几种常见方法：

使用 Chart.js 实现图例

Chart.js 内置图例功能，只需在配置中启用即可：

js 实现legend

const ctx = document.getElementById('myChart').getContext('2d');
const chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow'],
    datasets: [{
      label: 'Dataset 1',
      data: [10, 20, 30],
      backgroundColor: ['red', 'blue', 'yellow']
    }]
  },
  options: {
    plugins: {
      legend: {
        display: true,
        position: 'top'
      }
    }
  }
});

使用 D3.js 手动创建图例

D3.js 需要手动实现图例逻辑：

const data = [
  { color: "red", label: "Apples" },
  { color: "blue", label: "Oranges" }
];

const svg = d3.select("body").append("svg")
  .attr("width", 200)
  .attr("height", 100);

const legend = svg.selectAll(".legend")
  .data(data)
  .enter()
  .append("g")
  .attr("class", "legend")
  .attr("transform", (d, i) => `translate(0, ${i * 20})`);

legend.append("rect")
  .attr("width", 18)
  .attr("height", 18)
  .style("fill", d => d.color);

legend.append("text")
  .attr("x", 24)
  .attr("y", 9)
  .attr("dy", ".35em")
  .text(d => d.label);

纯 JavaScript/CSS 实现

通过 DOM 操作创建简单图例：

js 实现legend

const legendData = [
  { color: '#ff0000', text: 'High Priority' },
  { color: '#00ff00', text: 'Low Priority' }
];

const legend = document.createElement('div');
legend.style.display = 'flex';
legend.style.flexDirection = 'column';

legendData.forEach(item => {
  const entry = document.createElement('div');
  entry.style.display = 'flex';
  entry.style.alignItems = 'center';
  entry.style.margin = '5px';

  const colorBox = document.createElement('div');
  colorBox.style.width = '20px';
  colorBox.style.height = '20px';
  colorBox.style.backgroundColor = item.color;
  colorBox.style.marginRight = '10px';

  const label = document.createElement('span');
  label.textContent = item.text;

  entry.appendChild(colorBox);
  entry.appendChild(label);
  legend.appendChild(entry);
});

document.body.appendChild(legend);

响应式图例实现

结合事件处理实现交互式图例：

// 假设已有图表渲染逻辑
const legendItems = document.querySelectorAll('.legend-item');

legendItems.forEach(item => {
  item.addEventListener('click', function() {
    const seriesId = this.dataset.series;
    const chartSeries = document.querySelector(`.chart-series-${seriesId}`);

    // 切换显示状态
    const isHidden = chartSeries.style.opacity === '0';
    chartSeries.style.opacity = isHidden ? '1' : '0';
    this.style.opacity = isHidden ? '1' : '0.5';
  });
});

图例样式优化

添加 CSS 增强图例外观：

.legend {
  font-family: Arial, sans-serif;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 5px;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.legend-item {
  display: flex;
  align-items: center;
  margin: 5px 0;
  cursor: pointer;
  transition: opacity 0.2s;
}

.legend-color {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border: 1px solid #999;
}

选择方法应根据项目需求和技术栈决定。可视化库提供开箱即用的解决方案，而手动实现则提供更高灵活性。