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

Question

是否可以通过活动改变系列的颜色？

在此示例中，我触发警报和日志只是为了查看它是如何工作的，但我想知道是否可以更改所选选项的颜色。

简单示例：点击销售，事件将颜色从蓝色变为绿色

 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

首先，有几件事...

1. 在绘制图表之前，应应用图表事件。
2. 选择一个点和取消选择一个点时都会调用'select'事件。
   因此，在尝试访问数组的内容之前，您需要检查选择的长度。
   否则，当一个点被取消选择时，会发生错误，这里 --> chart.getSelection()[0]

---

要设置系列颜色，我们可以使用以下配置选项。

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

当'select'事件触发时，我们可以使用选择中的column属性来查找序列号。 它将是列值 - 1。

但是，为了更改系列颜色，必须重新绘制图表。
这意味着选择将被删除。

我们可以使用'ready'事件来重置选择。
但为了在重置选择时显示工具提示，
我们必须使用以下配置选项...

tooltip: {
  trigger: 'both'
}

---

请参阅以下工作片段，
当一个点被选中时，选中的系列颜色设置为绿色，并且图表在'select'事件中重新绘制。
然后在'ready'事件中重置选择...

 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>