当前位置：首页 > JavaScript

js 实现legend

2026-04-05 17:40:24JavaScript

实现图例（Legend）的方法

在JavaScript中，图例（Legend）常用于数据可视化库如Chart.js、D3.js或ECharts中，用于解释图表中不同颜色或符号代表的含义。以下是几种常见实现方式：

使用Chart.js创建图例

Chart.js内置自动生成图例的功能，通过配置options.legend属性实现：

const chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [{
      label: 'Dataset 1',
      data: [10, 20, 30],
      backgroundColor: ['red', 'blue', 'green']
    }]
  },
  options: {
    plugins: {
      legend: {
        position: 'top', // 位置：top, bottom, left, right
        labels: {
          font: {
            size: 14
          }
        }
      }
    }
  }
});

自定义HTML图例

通过动态生成HTML元素实现自定义图例：

function createLegend(items) {
  const legend = document.createElement('div');
  legend.className = 'legend';

  items.forEach(item => {
    const entry = document.createElement('div');
    entry.innerHTML = `
      <span style="background:${item.color}"></span>
      ${item.label}
    `;
    legend.appendChild(entry);
  });

  document.body.appendChild(legend);
}

// 调用示例
createLegend([
  { label: 'Category A', color: 'red' },
  { label: 'Category B', color: 'blue' }
]);

CSS样式建议：

.legend span {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 5px;
}

使用D3.js动态生成图例

D3.js适合需要高度自定义的场景：

const legendData = [
  { color: "#1f77b4", text: "Group 1" },
  { color: "#ff7f0e", text: "Group 2" }
];

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

legend.selectAll("rect")
  .data(legendData)
  .enter()
  .append("rect")
  .attr("x", 10)
  .attr("y", (d, i) => 10 + i * 25)
  .attr("width", 20)
  .attr("height", 20)
  .attr("fill", d => d.color);

legend.selectAll("text")
  .data(legendData)
  .enter()
  .append("text")
  .attr("x", 40)
  .attr("y", (d, i) => 25 + i * 25)
  .text(d => d.text);

响应式图例实现

通过监听窗口变化调整图例布局：

js 实现legend

function updateLegendPosition() {
  const chartWidth = chart.canvas.offsetWidth;
  if (chartWidth < 500) {
    chart.options.plugins.legend.position = 'bottom';
  } else {
    chart.options.plugins.legend.position = 'right';
  }
  chart.update();
}

window.addEventListener('resize', updateLegendPosition);