谷歌可視化（圖表工具）API

Question

試圖按照這裏的細節動畫谷歌圖表：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>