javascript - 如何捕获 Google Charts 饼图切片的颜色值？

Question

我有一个工作示例，说明如何使饼图与表格交互。我想添加的是它们相关性的视觉提示。我见过的唯一示例是表格行由 adding a listener 突出显示的地方.我想在表格中添加一个空单元格，其背景颜色是它对应的饼图切片的颜色。如何捕捉饼图切片的颜色？ JSFiddle

我现在拥有的:

  google.load("visualization", "1", {packages:["corechart","table"]});
  google.setOnLoadCallback(drawProductAllocationChart);
  function drawProductAllocationChart() {
    var data = google.visualization.arrayToDataTable([
      ['Name', 'Allocation'],
      ['Product A', 25],
      ['Product B', 50],
      ['Product C', 15],
      ['Product D', 10]
    ]);

    var options = {
      //title: 'My Daily Activities'
      is3D: true
    };

    var productAllocationChart = new google.visualization.PieChart(document.getElementById('product-allocation-chart'));
    productAllocationChart.draw(data, options);

    var productAllocationTable = new google.visualization.Table(document.getElementById('product-allocation-table'));
    productAllocationTable.draw(data, null);

    // When the table is selected, update the orgchart.
    google.visualization.events.addListener(productAllocationTable, 'select', function() {
      portfolioAllocationChart.setSelection(productAllocationTable.getSelection());
    });

    // When the orgchart is selected, update the table visualization.
    google.visualization.events.addListener(productAllocationChart, 'select', function() {
      productAllocationTable.setSelection(productAllocationChart.getSelection());
    });
  }

谢谢!

Answer 1

我的第一个想法是为 Google Charts 创建一个默认颜色的 map 。虽然，我还没有使用可视化 api 的数据表。

来自Google Group我得到了 31 种默认颜色的列表:

["#3366cc","#dc3912","#ff9900","#109618","#990099","#0099c6","#dd4477","#66aa00","#b82e2e","#316395","#994499","#22aa99","#aaaa11","#6633cc","#e67300","#8b0707","#651067","#329262","#5574a6","#3b3eac","#b77322","#16d620","#b91383","#f4359e","#9c5935","#a9c413","#2a778d","#668d1c","#bea413","#0c5922","#743411"]

我假设您知道将事物添加到饼图中的顺序，它很可能对应于表格中行的顺序。如果是这种情况，则只需将数组映射到行即可。