Question

我正在使用Google Charts在地图上工作。

当有人点击某个区域时，每个区域都会更改不透明度，而点击的区域会保留原始颜色。

就像这样，但对于地区： 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图表：点击时更改区域颜色

1 个答案: