请求协助：获取Google Charts环形图自定义HTML区域的图例

嘿，我来帮你搞定这个自定义图例的需求！其实Google Charts提供了不少内置方法可以直接获取图例相关的标签、颜色数据，不用自己瞎琢磨怎么提取。下面给你一套完整的代码示例，直接就能用到你的项目里：

核心思路 #

我们会先隐藏默认图例，然后通过Google Charts的getDataTable()获取标签和数值，再用getChartLayoutInterface()拿到每个环形切片的颜色，最后把这些数据渲染到你指定的自定义HTML区域里。

完整代码示例 #

1. HTML结构 #

先准备好图表容器和自定义图例的容器：

<!-- 环形图容器 -->
<div id="donut-chart" style="width: 400px; height: 300px;"></div>
<!-- 自定义图例容器 -->
<div id="custom-legend" style="padding: 10px; border: 1px solid #eee; border-radius: 4px;"></div>

2. JavaScript代码 #

初始化图表并提取渲染自定义图例：

// 加载Google Charts核心包
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawDonutChart);

function drawDonutChart() {
  // 示例数据（你可以替换成自己的业务数据）
  var data = google.visualization.arrayToDataTable([
    ['Category', 'Value'],
    ['已完成',     65],
    ['待处理',      20],
    ['已逾期',      15]
  ]);

  // 环形图配置：隐藏默认图例
  var options = {
    pieHole: 0.4,
    legend: 'none', // 关闭默认图例
    colors: ['#34A853', '#FBBC05', '#EA4335'] // 自定义切片颜色（可选）
  };

  // 初始化并绘制环形图
  var chart = new google.visualization.PieChart(document.getElementById('donut-chart'));
  chart.draw(data, options);

  // 绘制自定义图例
  renderCustomLegend(chart, data);
}

// 自定义图例渲染函数
function renderCustomLegend(chart, data) {
  var legendContainer = document.getElementById('custom-legend');
  legendContainer.innerHTML = ''; // 清空容器

  var layout = chart.getChartLayoutInterface();
  var totalRows = data.getNumberOfRows();

  // 遍历每个数据项，生成图例条目
  for (var i = 0; i < totalRows; i++) {
    // 获取切片颜色：优先用配置里的colors，否则取布局里的填充色
    var sliceColor = chart.getOption('colors')[i] || layout.getBoundingBox('slice#' + i + '#0').fill;
    // 获取分类标签
    var categoryLabel = data.getValue(i, 0);
    // 获取对应数值
    var categoryValue = data.getValue(i, 1);

    // 创建单个图例项的DOM元素
    var legendItem = document.createElement('div');
    legendItem.style.display = 'flex';
    legendItem.style.alignItems = 'center';
    legendItem.style.marginBottom = '8px';
    legendItem.style.cursor = 'pointer'; // 可选：添加点击交互

    // 颜色方块
    var colorBox = document.createElement('span');
    colorBox.style.width = '16px';
    colorBox.style.height = '16px';
    colorBox.style.backgroundColor = sliceColor;
    colorBox.style.marginRight = '8px';
    colorBox.style.borderRadius = '2px';

    // 标签文本
    var labelText = document.createElement('span');
    labelText.textContent = `${categoryLabel}: ${categoryValue}%`;
    labelText.style.fontSize = '14px';

    // 把元素组装起来，添加到容器
    legendItem.appendChild(colorBox);
    legendItem.appendChild(labelText);
    legendContainer.appendChild(legendItem);

    // 可选：给图例项添加点击高亮切片的交互
    legendItem.addEventListener('click', function(index) {
      return function() {
        chart.setSelection([{row: index, column: null}]);
      };
    }(i));
  }
}

关键细节说明 #

• 时机重要：一定要在chart.draw()之后调用renderCustomLegend，因为只有图表渲染完成后，才能获取到布局和颜色信息；
• 颜色获取：如果你在options里设置了colors数组，直接用chart.getOption('colors')[i]更稳定；如果没设置，就用layout.getBoundingBox('slice#' + i + '#0').fill取切片的默认填充色；
• 交互扩展：代码里加了可选的点击高亮切片的功能，你可以根据需求添加hover样式、跳转等更多交互；
• 动态更新：如果你的图表数据会动态变化，记得在数据更新并重新绘制图表后，再次调用renderCustomLegend刷新图例。

这样你就能把图例完美渲染到自己指定的HTML区域里啦！

内容的提问来源于stack exchange，提问作者Sushant