当前位置：首页 > JavaScript

js 实现legend

2026-03-13 23:29:09JavaScript

实现图例（Legend）的方法

在JavaScript中，图例（Legend）常用于数据可视化库（如D3.js、Chart.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'
    }, {
      label: 'Dataset 2',
      data: [15, 25, 35],
      backgroundColor: 'blue'
    }]
  },
  options: {
    legend: {
      display: true,
      position: 'top',
      labels: {
        fontColor: '#333'
      }
    }
  }
});

使用D3.js自定义图例

D3.js需要手动创建图例元素：

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

const legendItems = legend.selectAll('.legend-item')
  .data(colorScale.domain())
  .enter()
  .append('g')
  .attr('class', 'legend-item')
  .attr('transform', (d, i) => `translate(0, ${i * 20})`);

legendItems.append('rect')
  .attr('width', 18)
  .attr('height', 18)
  .attr('fill', colorScale);

legendItems.append('text')
  .attr('x', 24)
  .attr('y', 9)
  .attr('dy', '.35em')
  .text(d => d);

使用HTML/CSS静态图例

对于简单场景，可以直接用HTML/CSS创建：

js 实现legend

<div class="legend">
  <div class="legend-item">
    <span class="legend-color" style="background: red;"></span>
    <span class="legend-label">Series A</span>
  </div>
  <div class="legend-item">
    <span class="legend-color" style="background: blue;"></span>
    <span class="legend-label">Series B</span>
  </div>
</div>

.legend {
  display: flex;
  gap: 1rem;
}
.legend-color {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

动态生成图例的通用函数

function createLegend(containerId, items) {
  const container = document.getElementById(containerId);
  items.forEach(item => {
    const div = document.createElement('div');
    div.className = 'legend-item';
    div.innerHTML = `
      <span style="background:${item.color}"></span>
      <span>${item.label}</span>
    `;
    container.appendChild(div);
  });
}

// 使用示例
createLegend('legend-container', [
  { color: 'red', label: 'High Priority' },
  { color: 'blue', label: 'Medium Priority' }
]);