谷歌可视化 - 点击事件 [英] google visualization-Click event

问题描述

我使用google visulaization绘制饼图。我正面临的是，我无法在饼图上捕获点击事件。我这样做。

I am using google visulaization for drawing pie chart.Issue i am facing is, i cant able to capture click event on pie chart.i am doing like this.

function drawchartfromRe()
{
    dashboard = new google.visualization.Dashboard(
            document.getElementById('dashboard_div'));
    //alert("RefuelLength"+totrefuelList.length);
    //alert("Vehicleid:"+totrefuelList[0].vehicleId);
   //google.load("visualization", "1", {packages:["corechart"]});
    data = new google.visualization.DataTable();
    data.addColumn('string', 'Task');
    data.addColumn('number', 'Quantity');
    data.addRows(totrefuelList.length);
    for (var i=0;i<totrefuelList.length;i++)
    {
       data.setValue(i, 0, totrefuelList[i].vehicleName);
       data.setValue(i, 1, totrefuelList[i].totalRefuelQty);
    }

    // var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
     chart = new google.visualization.ChartWrapper({
      'chartType': 'PieChart',
      'containerId': 'chart_div',
      'options': {
          title: 'Refuel Trend',
          height:'500',
          width:'400',
          backgroundColor: { fill:'transparent' },
        'legend': 'right'
      }
    });

  /* google.visualization.events.addListener(chart, 'select', function(e) {
       // var selection = chart.getSelection();
      var vehid= data.getValue(visualization.getSelection()[0].row, 0);
        getRefueldailywise(vehid);
    });*/
   // chart.draw(data, options);
   drawDashboard(dashboard,data,chart);
   google.visualization.events.addListener(chart, 'select', function() {
       // grab a few details before redirecting

      alert(data.getValue(chart.getSelection()[0].row, 0));
       //location.href = 'http://www.google.com?row=' + row + '&col=' + col + '&year=' + year;
     });
}

在萤火虫中我收到这样的错误..
dashboard.getChart不是函数

In firebug i am getting error like this.. dashboard.getChart is not a function

推荐答案

图表包装器不是图表对象，也没有点击事件。事实上，饼图也没有点击事件，只有选择。

Chart Wrappers are not chart objects and do not have a click event. In fact, Pie Charts also do not have a click event, only select.

如果你阅读文档，它说：

1. 创建 ready 包装器事件


2. 让 ready 事件触发为包装中的图表选择事件

1. Create a ready event for the wrapper
2. Have the ready event trigger a select event for the chart in the wrapper

以下是他们提供的示例：

Here is the example they give:

var wrapper;
function drawVisualization() {

  // Draw a column chart
  wrapper = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    dataTable: [['Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                [700, 300, 400, 500, 600, 800]],
    options: {'title': 'Countries'},
    containerId: 'visualization'
  });

  // Never called.
  google.visualization.events.addListener(wrapper, 'onmouseover', uselessHandler);

  // Must wait for the ready event in order to
  // request the chart and subscribe to 'onmouseover'.
  google.visualization.events.addListener(wrapper, 'ready', onReady);

  wrapper.draw();

  // Never called
  function uselessHandler() {
    alert("I am never called!");
  }

  function onReady() {
    google.visualization.events.addListener(wrapper.getChart(), 'onmouseover', usefulHandler);
  }

  // Called
  function usefulHandler() {
    alert("Mouseover event!");
  }
}

因此，在您的情况下，您需要更改此部分：

So in your case you will need to change this section:

   google.visualization.events.addListener(chart, 'ready', function() {
       // grab a few details before redirecting

      alert(data.getValue(chart.getSelection()[0].row, 0));
       //location.href = 'http://www.google.com?row=' + row + '&col=' + col + '&year=' + year;
     });

对于这样的事情：

   google.visualization.events.addListener(chart, 'ready', function() {
       // grab a few details before redirecting
      google.visualization.events.addListener(chart.getChart(), 'select', function() {
          chartObject = chart.getChart();
          alert(data.getValue(chartObject.getSelection()[0].row, 0));
      });

       //location.href = 'http://www.google.com?row=' + row + '&col=' + col + '&year=' + year;
     });

这篇关于谷歌可视化 - 点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！