Question

我有一个由Google Chart API生成的饼图。图表的代码如下

google.load("visualization", "1", {packages:["corechart"]});      
google.setOnLoadCallback(drawChart1);     

function drawChart1() 
{
var data = google.visualization.arrayToDataTable([
        ['Location', 'Value'],
        ["Location A", 20 ],
        ["Location B", 32],
        ["Location C", 12],
        ["Location D", 20],
        ["Location E", 2],
        ["Location F", 20],
        ["Location H", 10]
        ]);

var options = {
    colors          : ['#00918c', '#d0c500','#945a94', '#84ac43', '#ea8c1c', '#006daf', '#c54d4d'],
        is3D            : 'false',
        isHTML          : 'false',
        height          : 200,
        width           : 285,
        backgroundColor : "transparent",
        chartArea       : {left:0,top:0,width:"100%",height:"100%"},                
        legend          : {position: 'right', alignment: "end"}
        };

var chart = new google.visualization.PieChart(document.getElementById('chart_div1'));
chart.draw(data, options);

}

图表的链接如下

Click to see Chart

我想在点击任何饼图区域时捕获图表中的事件。

假设他们点击饼图中的位置饼图我想要一个显示警告信息的功能，如点击位置A和图表中其他饼图的相同。

感谢您的回复

Answer 1

我添加了下面的代码，现在工作正常。

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

 function selectHandler() 
     {
   var selectedItem = chart.getSelection()[0];

       if (selectedItem) 
       {
         var topping = data.getValue(selectedItem.row, 0);
         alert('The user selected ' + topping);
       }
     } 


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

Answer 2

请参阅Binding Events in google pie chart的链接。

<!--Div that will hold the pie chart-->
    <div id="chart_div" style="width:400; height:300"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script>
  // 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.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'));

    function selectHandler() {
      var selectedItem = chart.getSelection()[0];
      if (selectedItem) {
        var topping = data.getValue(selectedItem.row, 0);
        alert('The user selected ' + topping);
      }
    }

    google.visualization.events.addListener(chart, 'select', selectHandler);
    chart.draw(data, options);
  } </script>

在谷歌饼图中绑定事件

2 个答案: