0

今天我发现了谷歌的这些图表服务，我玩了一下似乎卡住了图表转换动画，我尝试在同一张表上查看两组不同的数据，这些数据在按钮单击时会发生变化，以下是代码，

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <button type="button" id="b1">Click Me!</button> 
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>
  Google Visualization API Sample
  </title>
  <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('visualization'));
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>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

在这里https://developers.google.com/chart/interactive/docs/animation?hl=nl-NL，拜托，我知道这是一个愚蠢的问题，但这似乎对我不起作用......我添加了引用和所有内容，但仍然没有给我任何东西，请任何人都可以使用 html 修复此代码以使其正常工作或提供一些信息，我将不胜感激 :) 非常感谢。:)

4

1 回答 1

0

不用担心，我找到了答案，我知道这一定是一个非常明显的答案，但这是给可能需要帮助的人的 :)

    <html>
      <head>
     <button type="button" id="b1" onclick="init();" >Click me!</button>  
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
        google.load("visualization", "1", {packages:["corechart"]});
        google.setOnLoadCallback(init);
        function init(){
              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>
      </head>
      <body>
        <div id="chart_div" style="width: 900px; height: 500px;"></div>
      </body>
    </html>
于 2012-08-31T10:47:56.437 回答