如何使用事件更改图表颜色（谷歌图表）

Question

Is it possible to change the color of the series through the event?

In this example I trigger an alert and a log just to see how it works, but I would like to know if it is possible to change the color of the selected option.

Simple example: click on sales and the event changes the color from blue to green

 google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2013', 1000, 400], ['2014', 1170, 460], ['2015', 660, 1120], ['2016', 1030, 540] ]); var options = { title: 'Company Performance', hAxis: {title: 'Year', titleTextStyle: {color: '#333'}}, vAxis: {minValue: 0} }; var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); chart.draw(data, options); google.visualization.events.addListener(chart, 'select', selectHandler); function selectHandler(e) { console.log(chart.getSelection()[0]); alert('A table row was selected'); } }

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div" style="width: 100%; height: 500px;"></div>

Answer 1

first, a couple things...

1. chart events should be applied, before the chart is drawn.
2. the 'select' event is called both when a point is selected, and when it is unselected.
   as such, you need to check the length of the selection, before trying to access the contents of the array.
   otherwise, when a point is unselected, an error would occur, here --> chart.getSelection()[0]

---

to set the series color, we can use the following config option.

series: {
  0: {  // <-- series number
    color: 'green'
  }
}

when the 'select' event fires, we can use the column property from the selection to find the series number. it will be the column value - 1.

however, in order to change the series color, the chart must be re-drawn.
which means the selection will be removed.

we can use the 'ready' event to reset the selection.
but in order to show the tooltip when the selection is reset,
we must use the following config option...

tooltip: {
  trigger: 'both'
}

---

see following working snippet,
when a point is selected, the selected series color is set to green, and the chart is re-drawn in the 'select' event.
then the selection is reset in the 'ready' event...

 google.charts.load('current', { packages: ['corechart'] }).then(function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2013', 1000, 400], ['2014', 1170, 460], ['2015', 660, 1120], ['2016', 1030, 540] ]); var options = { title: 'Company Performance', hAxis: { title: 'Year', titleTextStyle: { color: '#333' } }, vAxis: { minValue: 0 }, tooltip: { trigger: 'both' } }; var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); var selection = []; google.visualization.events.addListener(chart, 'ready', readyHandler); function readyHandler() { chart.setSelection(selection); } google.visualization.events.addListener(chart, 'select', selectHandler); function selectHandler() { selection = chart.getSelection(); options.series = {}; if (selection.length > 0) { options.series[selection[0].column - 1] = { color: 'green' }; } chart.draw(data, options); } chart.draw(data, options); window.addEventListener('resize', function () { chart.draw(data, options); }); });

 html, body { height: 100%; margin: 0px 0px 0px 0px; overflow: hidden; padding: 0px 0px 0px 0px; } #chart_div { height: 100%; }

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>