Question

按照此处的详细信息尝试制作Google图表动画：https://developers.google.com/chart/interactive/docs/animation

不太确定我在下面的示例中缺少什么？还希望添加onclick事件。

是的，我在身体中有id = chart_div的div。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">

 // Some raw data (not necessarily accurate)
var rowData1 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua  Guinea',
                 'Rwanda', 'Average'],
                ['2004/05', 165, 938, 522, 998, 450, 114.6],
                ['2005/06', 135, 1120, 599, 1268, 288, 382],
                ['2006/07', 157, 1167, 587, 807, 397, 623],
                ['2007/08', 139, 1110, 615, 968, 215, 409.4],
                ['2008/09', 136, 691, 629, 1026, 366, 569.6]];
var rowData2 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua  Guinea',
                 'Rwanda', 'Average'],
                ['2004/05', 122, 638, 722, 998, 450, 614.6],
                ['2005/06', 100, 1120, 899, 1268, 288, 682],
                ['2006/07', 183, 167, 487, 207, 397, 623],
                ['2007/08', 200, 510, 315, 1068, 215, 609.4],
                ['2008/09', 123, 491, 829, 826, 366, 569.6]];

// Create and populate the data tables.
var data = [];
data[0] = google.visualization.arrayToDataTable(rowData1);
data[1] = google.visualization.arrayToDataTable(rowData2);

var options = {
  width: 400,
  height: 240,
  vAxis: {title: "Cups"},
  hAxis: {title: "Month"},
  seriesType: "bars",
  series: {5: {type: "line"}},
  animation:{
    duration: 1000,
    easing: 'out'
  },
};
var current = 0;
// Create and draw the visualization.
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
var button = document.getElementById('b1');
function drawChart() {
  // Disabling the button while the chart is drawing.
  button.disabled = true;
  google.visualization.events.addListener(chart, 'ready',
      function() {
        button.disabled = false;
        button.value = 'Switch to ' + (current ? 'Tea' : 'Coffee');
      });
  options['title'] = 'Monthly ' + (current ? 'Coffee' : 'Tea') + ' Production by Country';

  chart.draw(data[current], options);
}
drawChart();

button.onclick = function() {
  current = 1 - current;
  drawChart();
}
</script>

Answer 1

我猜你忘记了jQuery。另外，你有这个：

var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
var button = document.getElementById('b1');

所以你的HTML绝对需要如下所示。是吗？

<form><input id="b1" type="button" value="Change Value"></form>
<div id="chart_div" style="position: relative;"></div>

这里有完整的脚本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script id="jqueryui" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js" defer="" async=""></script>
<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript"> 
google.load('visualization', '1.1', {packages: ['corechart']});

google.setOnLoadCallback(drawExample);

function drawExample() {
  // Some raw data (not necessarily accurate)
  var rowData1 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua  Guinea',
                   'Rwanda', 'Average'],
                  ['2004/05', 165, 938, 522, 998, 450, 114.6],
                  ['2005/06', 135, 1120, 599, 1268, 288, 382],
                  ['2006/07', 157, 1167, 587, 807, 397, 623],
                  ['2007/08', 139, 1110, 615, 968, 215, 409.4],
                  ['2008/09', 136, 691, 629, 1026, 366, 569.6]];
  var rowData2 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua  Guinea',
                   'Rwanda', 'Average'],
                  ['2004/05', 122, 638, 722, 998, 450, 614.6],
                  ['2005/06', 100, 1120, 899, 1268, 288, 682],
                  ['2006/07', 183, 167, 487, 207, 397, 623],
                  ['2007/08', 200, 510, 315, 1068, 215, 609.4],
                  ['2008/09', 123, 491, 829, 826, 366, 569.6]];

  // Create and populate the data tables.
  var data = [];
  data[0] = google.visualization.arrayToDataTable(rowData1);
  data[1] = google.visualization.arrayToDataTable(rowData2);

  var options = {
    width: 400,
    height: 240,
    vAxis: {title: "Cups"},
    hAxis: {title: "Month"},
    seriesType: "bars",
    series: {5: {type: "line"}},
    animation:{
      duration: 1000,
      easing: 'out'
    }
  };
  var current = 0;
  // Create and draw the visualization.
  var chart = new google.visualization.ComboChart(document.getElementById('example-visualization'));
  var button = document.getElementById('example');
  function drawChart() {
     // Disabling the button while the chart is drawing.
    button.disabled = true;
    google.visualization.events.addListener(chart, 'ready',
        function() {
          button.disabled = false;
          button.value = 'Switch to ' + (current ? 'Tea' : 'Coffee');
        });
    options['title'] = 'Monthly ' + (current ? 'Coffee' : 'Tea') + ' Production by Country';

    chart.draw(data[current], options);
  }
  drawChart();

  button.onclick = function() {
    current = 1 - current;
    drawChart();
  }
}
</script>

<form><input id="example" type="button" value="Change Value"></form>
<div id="example-visualization" style="position: relative;"></div>

谷歌可视化（图表工具）API

1 个答案: