How can I display the color value of a fragment of the pie charts of Google charts?

I have a working example of how to make a pie chart interact with a table. What I would like to add is a visual signal of their correlation. The only examples I've seen are where the table row is highlighted by adding a listener . I would like to add an empty cell to the table whose background color matches the slice color of the pie to which this corresponds. How to capture the color of the slice of the cake? Jsfiddle

What I have now:

  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());
    });
  }

Thank!

+4
source share
1 answer

- Google. , 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"]

, , , , . , .

+3

Source: https://habr.com/ru/post/1535111/


All Articles