Question

今天我发现它谷歌的这些图表服务和我玩了一点似乎卡住和图表过渡动画我尝试2在同一个表上查看两组不同的数据，按钮点击更改，以下是代码，

  <!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工作或提供一些信息如何，我会非常感激:)非常感谢你。：）

Answer 1

不用担心，我找到了答案，我知道这一定是一个非常明显的答案，但这适用于任何可能需要帮助的人：）

    <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>

谷歌组合图转换动画

1 个答案: