谷歌組合圖轉換動畫

今天我發現它這些圖表服務由谷歌和我玩了一個小小的答似乎去卡住和圖轉換動畫，我試着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，拜託，我知道這是一個nooby的問題，但是這似乎並沒有爲我工作。我添加引用和一切，但仍然沒有按沒有給我任何東西，請任何人可以修復這個代碼與HTML工作或提供一些信息如何，我會非常感激:)非常感謝你。 :)

來源

2012-08-30 Hasitha Shan

不用擔心，我找到了答案，我知道這一定是一個很明顯的答案，但這是誰的人可能需要的幫助:)

<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-31 10:47:56

谷歌組合圖轉換動畫

回答

相關問題