在javascript中(图表切片内)在何处添加网站搜索链接?

时间:2018-11-23 15:52:35

标签: javascript charts google-visualization

我一直在使用Google图表,想知道如何添加到另一个网站的链接,就我而言,如果用户单击购物车的切片(6.178),我想链接到该网站我应该添加javascript代码以及什么代码?

致谢

$servername = "127.0.0.1";
$username = "ltm_23041946";
$password = "pass_wass_heree";
$dbname = "ltm_23041946_a";
$conn = new mysqli($servername, $username, $password, $dbname);

1 个答案:

答案 0 :(得分:0)

将要打开的网站添加到数据表中。

var data = google.visualization.arrayToDataTable([
  ['Metric', 'Score', 'Site'],
  ['Uniqueness', 6.178, 'https://www.google.com/'],
  ['Other', 93.82, 'https://www.bing.com/']
]);

使用数据视图从图表中隐藏网站。

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1]);

然后在图表的选择事件上打开站点。

  google.visualization.events.addListener(chart, 'select', function () {
    var selection = chart.getSelection();  // get selected slice

    // ensure something is selected
    if (selection.length > 0) {
      // open the site
      window.open(data.getValue(selection[0].row, 2), '_blank');
    }
  });

使用视图绘制图表。

  chart.draw(view, options);

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

google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Metric', 'Score', 'Site'],
    ['Uniqueness', 6.178, 'https://www.google.com/'],
    ['Other', 93.82, 'https://www.bing.com/']
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1]);

  var options = {
    title: 'Unique Identifiability',
    pieHole: 0.6,
    colors: ['#EE7023', '#808080']
  };

  var chart = new google.visualization.PieChart(document.getElementById('uniqueness'));

  google.visualization.events.addListener(chart, 'select', function () {
    var selection = chart.getSelection();  // get selected slice

    // ensure something is selected
    if (selection.length > 0) {
      // open the site
      //window.open(data.getValue(selection[0].row, 2), '_blank');
      console.log(data.getValue(selection[0].row, 2));
    }
  });

  chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="uniqueness"></div>

请注意:该站点实际上不会从摘要中打开,
但应该可以在您的页面上正常工作...