如何使用事件更改图表颜色（google 个图表）

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

首先，有几件事...

应该在绘制图表之前应用图表事件。
选择点和取消选择点时都会调用 '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>

如何使用事件更改图表颜色（google 个图表）

How can I change the chart color using events (google charts)

javascript

charts

google-visualization