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

2019-10-13 04:37:42 阅读：205 来源： 互联网

标签：javascript google-maps google-visualization

我有与json一起添加到Google图表的不同国家/地区.每个国家都有指向特定站点的链接.这个对我有用.但是工具提示/标签的名称是一个链接.如何删除工具提示中的链接并添加国家/地区名称？
以及如何将国家边界颜色更改为白色？
提前.

<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;
  }
}

解决方法:

首先,建议不要使用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>

标签：javascript,google-maps,google-visualization
来源： https://codeday.me/bug/20191013/1905357.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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