javascript - 如何在谷歌柱形图 api 中添加链接(可点击并获取新数据)

Question

我最近使用了谷歌图表 API。

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

例如，如果类型是 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>

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

Answer 1

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

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

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