Google可視化API-基於選擇的多個圖表

Question

我對Google Visualization Charts API還是很陌生。 我試圖根據下拉選擇顯示不同的圖表。 如果要添加其他繪圖功能，則無法顯示圖表。 請在下面嘗試的小提琴中查找。

http://jsfiddle.net/meetravi/PFa5h/5/

JS代碼：

   $(document).ready(function(){
   var selectedVal = "";
   $('#dashboard-chart-type').change(function(){
     selectedVal = $(this).val();
     alert(selectedVal);
     switch(selectedVal) {

      case "average":
          $('#visualization').empty();
          init();
          break;
      case "total_install":
          debugger;
          $('#visualization').empty();
          init();
          break;
      case "total_uninstall":
          debugger;
          $('#visualization').empty();
          init();
          break;
      default:
          $('#visualization').empty();
          init();
          break;
  }
});

if(selectedVal==""){
    init();
}

 });

Answer 1

經過長期的奮斗，使多個圖表基於選擇工作。 問題是要加載多個圖表，您需要通過回調來調用繪圖可視化功能。 我從Google網上論壇中找到了有用的信息。

然后我添加了一些函數init() ， init2() ... etc來加載不同的圖表。 這里需要注意的一件事是在init()方法中調用drawvisualisation() ，僅應使用google.setOnLoadCallback（drawVisualization（））進行調用； 而不是調用google.setOnLoadCallback（drawVisualization）; 如Google操場示例中所述。

 function init(){
     google.setOnLoadCallback(drawVisualization());
 }
 function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Austria', 'Bulgaria', 'Denmark', 'Greece'],
    ['2003',  1336060,    400361,    1001582,   997974],
    ['2004',  1538156,    366849,    1119450,   941795],
    ['2005',  1576579,    440514,    993360,    930593],
    ['2006',  1600652,    434552,    1004163,   897127],
    ['2007',  1968113,    393032,    979198,    1080887],
    ['2008',  1901067,    517206,    916965,    1056036]
]);

// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
    draw(data,
    {title:"Yearly Coffee Consumption by Country",
        width:600, height:400,
        vAxis: {title: "Year"},
        hAxis: {title: "Cups"}}
);
}

當我嘗試使用代碼google.setOnLoadCallback（drawVisualization）時，未發生調用，該代碼通過不顯示破壞了我的圖表。

這是我根據選擇工作的小提琴。 http://jsfiddle.net/meetravi/PFa5h/6/

在上面的小提琴中，我加載了不同類型的圖表，例如折線圖，列圖，堆積圖等。