Question

好的，这就是我的问题：我使用的是一组数据，即美国所有州的二氧化碳排放量。到目前为止，我将所有州分成了相应的区域。我想做的是;当有人点击一个区域时，它会创建一个相应状态的新饼图。因此，如果单击东北地区的部分，它将打开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>

Answer 1

您可以使用此处所述的互动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();，然后在下一个图表中淡入淡出。您必须将参数传递给第二个图表，以便它知道要显示哪个参数。

Javascript图表点击打开新的

1 个答案: