4

I am using a set of data, the amount of CO2 output of the all the US states. So far I split all the states into their corresponding regions. What I am trying to do is; when someone clicks on a region, it would make a new pie chart of the corresponding states. So if click on the section of Northeast region, it would open up a new chart of PA, NY, NH, etc. I am not sure as to how to set up the code for an on click to open new chart. My ultimate goal is to just have it fade out and fade in the new chart. I am rather new to this so I am not too sure. Here is the code that I already have:

<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();を使用して、次のチャートにフェードインするだけです。どちらを表示するかを知るために、2 番目のチャートにパラメータを渡す必要があります。

于 2012-10-25T19:04:35.720 に答える