Google 图表：点击更改区域颜色

Question

我正在使用 Google 图表制作地图。

当有人点击一个区域时，每个区域都会改变不透明度，而被点击的区域会保持原来的颜色。

完全是这样，但对于地区： https://developers.google.com/chart/interactive/docs/gallery/columnchart#creating-material-column-charts

你们知道从哪里开始吗？我可以检索当前选择的项目，这很容易......但现在我必须检索 每个项目 但选定的项目和 改变它们的颜色。

提前致谢。

Answer 1

使用 colorAxis 配置选项，
为所选区域分配更高的数字
将剩余区域重置为零

请参阅以下工作片段...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Country', 'Popularity'],
      ['England', 0],
      ['Wales', 0],
      ['Scotland', 0],
      ['Ireland', 0],
    ]);

    var options = {
      colorAxis: {
        minValue: 0,
        colors: ['#FFEBEE', '#B71C1C']
      },
      region: 'GB',
      resolution: 'provinces'
    };

    var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));

    google.visualization.events.addListener(chart, 'select', function () {
      for (var i = 0; i < data.getNumberOfRows(); i++) {
        if (i === chart.getSelection()[0].row) {
          data.setValue(i, 1, 100);
        } else {
          data.setValue(i, 1, 0);
        }
      }
      chart.draw(data, options);
    });

    chart.draw(data, options);
  },
  packages:['geochart']
});

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

Google 图表：点击更改区域颜色

Google Charts : change region color on click

charts

dictionary

colors

onclick

region