4

我正在使用一组数据，即美国所有州的 CO 2输出量。到目前为止，我将所有州划分为相应的区域。我想做的是；当有人点击一个区域时，它会制作一个新的对应状态的饼图。因此，如果单击东北地区部分，它将打开一个新的 PA、NY、NH 等图表。我不确定如何设置代码以单击打开新图表。我的最终目标是让它淡出并在新图表中淡出。我对此很陌生，所以我不太确定。这是我已经拥有的代码：

<html>
<head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    
function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Region',      'CO2 Output'],
        ['Northeast',   31887048.7],
        ['Midwest',     64278877.8],
        ['South',       76192034.1],
        ['West',        78808504.3],
    ]);
    
    var options = {
        title: 'Average Maximum Co2 Output of the US Regions'
    };
    
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

</script>
</head>

<body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
4

1 回答 1

0

您可以使用此处描述的交互性https://developers.google.com/chart/interactive/docs/basic_interactivity

看：

  // The select handler. Call the chart's getSelection() method
  function selectHandler() {
    var selectedItem = chart.getSelection()[0];
    if (selectedItem) {
      var value = data.getValue(selectedItem.row, selectedItem.column);
      alert('The user selected ' + value);
    }
  }

  // Listen for the 'select' event, and call my function selectHandler() when
  // the user selects something on the chart.
  google.visualization.events.addListener(chart, 'select', selectHandler);

对于淡出，您可以只使用 jQuery $('#myChartDiv').fadeOut();，然后在下一个图表中淡入。您必须将参数传递给第二个图表，以便它知道要显示哪个图表。

于 2012-10-25T19:04:35.720 回答