Question

![enter image description here][1]


<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

// Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);

        google.visualization.events.addListener(chart, 'select', selectHandler);

        var label1 = data.pieSliceText('label');

        // The selection handler.
        // Loop through all items in the selection and concatenate
        // a single message from all of them.
    function selectHandler() {

    window.location.href = 'http://www.google.com?search='&label1;   
    // I want that on clickof slice , i must be able to navigate to a different page.                                  /    // with the clicked slice ID passed as a Querystring.
}

      }
    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

请参阅此问题图表。我无法发布图表：
Google Pie Charts Label

我必须在饼图中获取点击切片的ID并使用其ID并将其与网址连接以使其可重定向。使用单击切片的id作为查询字符串。请帮忙。

Answer 1

您需要从DataTable中获取相关数据：

function selectHandler() {
    var selection = chart.getSelection();
    if (selection.length) {
        var pieSliceLabel = data.getValue(selection[0].row, 0);
        window.location.href = 'http://www.google.com?search=' + pieSliceLabel;
    }
}

Answer 2

我找到了解决问题的方法。

以下是答案部分。

首先添加您想要的额外列和行＆gt;＆gt;

function drawChart() {

// Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addColumn('string', 'Group');
        data.addColumn('string', 'Category');


        data.addRows([
          ['Mushrooms', 3,'A','Happy'],
          ['Onions', 1,'B','Day'],
          ['Olives', 1,'A','Smile'],
          ['Zucchini', 1,'C','Be'],
          ['Pepperoni', 2,'D','Happy']
        ]);

然后在SelectionHandler中获取您想要的相应行，例如＆gt;＆gt;

function selectHandler() {
    var selection = chart.getSelection();
    if (selection.length) {
        var pieSliceLabel = data.getValue(selection[0].row, 0);
        var pieSliceGroup = data.getValue(selection[0].row, 2);
        var pieSliceCategory = data.getValue(selection[0].row, 3);

        window.location.href = 'http://www.google.com?search=' + pieSliceLabel +'&Group='+ pieSliceGroup+ '&Category='+ pieSliceCategory;
    }

这对我有用。

使用Google-charts api中的饼图切片，单击切片到不同的页面进行导航

2 个答案: