是否可以将链接放在谷歌图表中的气泡图标签中?

时间:2016-08-22 08:48:33

标签: javascript google-visualization

我正在研究谷歌图表,并想知道链接是否可以放在谷歌泡泡图中的气泡标签中,经过visualisation bubble chart api link但找不到这样的东西。我试过allowHtml:true,但它不起作用。有什么建议吗?

1 个答案:

答案 0 :(得分:0)

虽然html不能用于泡泡文字
您可以使用'select'事件执行链接操作

请参阅以下工作代码段...



google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
      ['CAN',    80.66,              1.67,      'North America',  33739900],
      ['DEU',    79.84,              1.36,      'Europe',         81902307],
      ['DNK',    78.6,               1.84,      'Europe',         5523095],
      ['EGY',    72.73,              2.78,      'Middle East',    79716203],
      ['GBR',    80.05,              2,         'Europe',         61801570],
      ['IRN',    72.49,              1.7,       'Middle East',    73137148],
      ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
      ['ISR',    81.55,              2.96,      'Middle East',    7485600],
      ['RUS',    68.6,               1.54,      'Europe',         141850000],
      ['USA',    78.09,              2.05,      'North America',  307007000]
    ]);

    var options = {
      bubble: {
        textStyle: {
          fontSize: 11,
          color: '#0000EE',
          underline: true
        }
      },
      legend: {
        position: 'bottom'
      }
    };

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

    google.visualization.events.addListener(chart, 'select', function () {
      var selection = chart.getSelection();
      if (selection.length > 0) {
        var url = 'https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=';
        var region = encodeURI(data.getValue(selection[0].row, 3));
        //window.open(url + region, '_blank');
        console.log(url + region);
      }
    });

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

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
&#13;
&#13;
&#13;