3

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

}

チャートのリンクは以下の通りです

クリックしてチャートを表示

円グラフの領域をクリックしたときに、グラフにイベントをキャプチャしたいと考えています。

円グラフの場所 A の円をクリックすると、警告メッセージを場所 A のクリックとして表示し、グラフの他の円についても同じように表示する関数が必要だとします。

返信ありがとう

4

2 に答える 2

5

以下のコードを追加しましたが、現在は正常に動作しています。

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);
于 2013-01-08T06:46:42.363 に答える
3

Google の円グラフで Binding Eventsのリンクを参照してください。

<!--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>
于 2015-10-08T06:25:34.617 に答える