如何獲取谷歌圖表動畫示例在網頁上工作

Question

對我正在爲朋友做這個，所以請不要殲滅我。

我想的更復雜的例子之一，從 https://developers.google.com/chart/interactive/docs/animation

工作在網頁中，而且，理想情況下，爵士小提琴。

我試過在html和body標籤的周圍，試圖創建一個div標籤放置圖形，嘗試包括各種庫，沒有它的工作無論是作爲一個網頁，或者JS小提琴。

我需要的是有它在JS小提琴的工作，然後在我需要添加到JavaScript的JS中撥弄標籤指令得到它的工作作爲一個獨立的網頁。 JS小提琴顯然會幫助我更快地適應它。

幫助！

// 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(); 
} 

Answer 1

也許你沒有正確地引用，

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(); 
      } 
     } 

WORKING FIDDLE