单击Google Sankey节点

时间:2017-03-21 02:44:17

标签: javascript charts google-visualization sankey-diagram

点击Google可视化Sankey图中的节点时,是否有办法在给定网址的弹出窗口中打开pdf?

我有一个带有弹出消息的小提琴here,但我不知道如何在该窗口内呈现页面,也不知道在哪里定义哪个图像与sankey def'ns中的哪个节点相关。 / p>

  google.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'From');
    data.addColumn('string', 'To');
    data.addColumn('number', 'Weight');
    data.addRows([
      [ 'A', 'X', 5 ],
      [ 'A', 'Y', 7 ],
      [ 'A', 'Z', 6 ],
      [ 'B', 'X', 2 ],
      [ 'B', 'Y', 9 ],
      [ 'B', 'Z', 4 ]
    ]);

    // Sets chart options.
    var options = {
      width: 600,
        sankey: {
            node: {
                interactivity: true
            }
        }
    };

    // Instantiates and draws our chart, passing in some options.
    var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
    chart.draw(data, options);
      google.visualization.events.addListener(chart, 'select', function() {
          var sel = chart.getSelection();
          if (sel.length)
                var href = "http://www.google.com"

              alert('You selected node "' + sel[0].name + '"');
      });
  }

1 个答案:

答案 0 :(得分:0)

您可以使用switch语句来确定选择了哪个节点

然后使用window.open来显示pdf等...

google.visualization.events.addListener(chart, 'select', function() {
  var sel = chart.getSelection();
  if (sel.length) {
    switch (sel[0].name) {
      case 'A':
        window.open('http://www.bing.com');
        break;

      case 'B':
        window.open('http://www.yahoo.com');
        break;

      default:
        window.open('http://www.google.com');
    }
  }
});

请参阅forked fiddle ...