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

Question

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

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 ...

  

通过jsapi加载程序保留的Google Charts版本不再一致更新。从现在开始请使用新的gstatic装载机。

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

这将仅将load语句更改为...

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

（callback也可以添加到load语句中）

根据{{​​3}}，

第二列应该是数字（不是字符串/链接）

但由于点击处理程序需要该链接，因此请使用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>