如何在Google柱形图api中添加链接（可点击并获取新数据）

Question

我最近使用过Google图表API。

我想在Google图表工具提示中添加外部链接。

例如，如果type为X，则加载数据。加载X类型数据后，我想获取其中url在图表中的Y类型数据，它将是可点击的。

var get_chart = function(cdata, htitle) {
  google.charts.load("current", {
    packages: ['corechart']
  });
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable(cdata);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1,
      {
        calc: "stringify",
        //sourceColumn: 1,
        type: "string",
        role: "annotation"
      },
      2, 3
    ]);

    var options = {
      //title: "Density of Precious Metals, in g/cm^3",
      //width: 600,
      //height: 400,
      bar: {
        groupWidth: "80%"
      },
      //legend: { position: "none" },
      legend: "none",
      vAxis: {
        viewWindow: {
          min: 0,
          max: 100
        },
        ticks: [0, 40, 60, 84, 94, 100],
        textPosition: 'none',
        //annotations: {style: ""}
      },
      hAxis: {
        title: htitle,
      }
    };
    var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
    chart.draw(view, options);
  }
}

var json = {
  "cdata": [
    ["Element", "", {
      "role": "style"
    }, {
      "role": "annotation"
    }],
    ["USA", 84, "#f39c12", "Best"]
  ],
  "url": "x.php?type=y"
};
var cdata = json.cdata;
get_chart(cdata, '');

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values"></div>

现在我如何在图表中使用我的网址属性？

Answer 1

从网址：https://developers.google.com/chart/interactive/docs/events?csw=1

中使用此功能

＆＃13;

＆＃13;

var get_chart = function(cdata, htitle,url) {
  google.charts.load("current", {
    packages: ['corechart']
  });
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable(cdata);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1,
      {
        calc: "stringify",
        //sourceColumn: 1,
        type: "string",
        role: "annotation"
      },
      2, 3
    ]);

    var options = {
      //title: "Density of Precious Metals, in g/cm^3",
      //width: 600,
      //height: 400,
      bar: {
        groupWidth: "80%"
      },
      //legend: { position: "none" },
      legend: "none",
      vAxis: {
        viewWindow: {
          min: 0,
          max: 100
        },
        ticks: [0, 40, 60, 84, 94, 100],
        textPosition: 'none',
        //annotations: {style: ""}
      },
      hAxis: {
        title: htitle,
      }
    };
    var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
    chart.draw(view, options);
    
    //modify code
    google.visualization.events.addListener(chart, 'select', selectHandler);

    function selectHandler(e) {
      //alert(url);
      window.location = url;
    }
  }
}

var json = {
  "cdata": [
    ["Element", "", {
      "role": "style"
    }, {
      "role": "annotation"
    }],
    ["USA", 84, "#f39c12", "Best"]
  ],
  "url": "x.php?type=y"
};
var cdata = json.cdata;
var url = json.url
get_chart(cdata, '',url);

＆＃13;

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values"></div>

＆＃13;

＆＃13;

＆＃13;