javascript - 如何使用标签中的超链接自定义谷歌图表？

Question

我有不同的国家/地区，我使用 json 获取这些国家/地区并将其添加到谷歌图表中。每个国家/地区都有一个特定网站的链接。这个对我有用。但工具提示/标签的名称是一个链接。如何删除工具提示中的链接并添加国家/地区名称？ 如何将国家边界颜色更改为白色？ 提前谢谢。

HTML

<div id="visualization"></div>

JavaScript

google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawVisualization);

function drawVisualization() {
   var data = new google.visualization.arrayToDataTable([
    ['Country','Link',],
      ['Canada','http://www.google.ca'],
      ['Russia','http://www.bbc.com'],
      ['Australia','http://www.nytimes.com'],
   ]);

  var options = {
    colorAxis: {colors: 'white'},
    backgroundColor: '#81d4fa',
    datalessRegionColor: '#f8bbd0',
    defaultColor: 'black',
    displayMode:'regions',
    tooltip: {textStyle: {color: '#FF0000'}, trigger:'focus',isHtml: true},
    legend:'none',
    height:300,
    width:400
  };

  var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
  google.visualization.events.addListener(chart, 'select', myClickHandler);
  chart.draw(data, options);

  function myClickHandler(){
    var link = data.getValue(chart.getSelection()[0]['row'],1);
    // Change the current site
    location.href = link;
  }
}

Answer 1

首先，建议不要使用 jsapi 加载库

根据release notes ...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.

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

这将仅更改load语句，以...

google.charts.load('current', {
  callback: drawVisualization,
  packages:['geochart']
});

(回调也可以添加到load语句中)

<小时/>

下一步，根据data format for regions mode ,

第二列应该是数字(不是字符串/链接)

但由于点击处理程序需要链接，因此请使用 DataView 从图表中隐藏该列

^ 这将修复工具提示 - 添加国家/地区名称而不是链接

根据colorAxis，数字列驱动国家/地区的阴影

如果没有提供数字，如问题中所示，则 colorAxis 将不起作用

<小时/>

最后，没有控制国家边界的标准选项

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

google.charts.load('current', {
  callback: drawVisualization,
  packages:['geochart']
});

function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
    ['Country','Link',],
    ['Canada','http://www.google.ca'],
    ['Russia','http://www.bbc.com'],
    ['Australia','http://www.nytimes.com'],
  ]);

  var view = new google.visualization.DataView(data);
  view.hideColumns([1]);

  var options = {
    backgroundColor: '#81d4fa',
    datalessRegionColor: '#f8bbd0',
    defaultColor: 'black',
    displayMode: 'regions',
    tooltip: {textStyle: {color: '#FF0000'}, trigger:'focus',isHtml: true},
    legend: 'none',
    height:300,
    width:400
  };

  var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
  google.visualization.events.addListener(chart, 'select', myClickHandler);
  chart.draw(view, options);

  function myClickHandler(){
    var selection = chart.getSelection();
    if (selection.length > 0) {
      var link = data.getValue(selection[0].row, 1);
      window.open(link, '_blank');
    }
  }
}

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