谷歌可視化切換Div表中的多個圖表

Question

我已經搜索過，並且只能看到通過setOnLoadCallback（drawChart）通過一個「drawChart」函數創建的多個Google圖表的示例。我試圖在一個函數中繪製六個新圖表來覆蓋現有div標籤中的圖表。當我調用我的「drawChart2（）」函數時，頁面會從第一個函數的現有圖表刷新。每個圖表都包含一個不同的數據集，我試圖實現的基本上是使用菜單按鈕切換整個儀表板內容。我應該使用ChartWrapper嗎？

感謝您的任何指導！

Answer 1

也許你應該使用ChartWrapper。我有一個你可以在數據集之間切換的例子。 U還可以在圖表類型之間切換。

JSFiddle Example

google.load('visualization', '1.0', {'packages': ['corechart']}); 
google.setOnLoadCallback(initialize); 

function initialize() { 

var chart = new google.visualization.ChartWrapper({ 
    containerId: 'chart-div' 
}); 

var data = google.visualization.arrayToDataTable([ 
      ['Month', 'Value1', 'Value2'], 
      ['Jan 2016', 1000, 500], 
      ['Feb 2016', 1200, 600], 
      ['March 2016', 1300, 650], 
      ['April 2016', 800, 400] 
     ]); 

var data2 = google.visualization.arrayToDataTable([ 
      ['Month', 'Value1', 'Value2'], 
      ['Jan 2015', 2000, 120], 
      ['Feb 2015', 2500, 800], 
      ['March 2015', 560, 200], 
      ['April 2015', 700, 500] 
     ]); 

var options = 
    { 
     title: 'Product Rating', 
     colors: ['#00d819', '#ff0000'], 
     vAxis: {minValue: 0}, 

     animation: { 
     duration: 1000, 
     easing: 'out' 
     } 
    }; 

var button1 = document.getElementById('b1'); 
var button2 = document.getElementById('b2'); 
var button3 = document.getElementById('b3'); 
var button4 = document.getElementById('b4'); 



function drawChart1() { 
    chart.setChartType('AreaChart'); 
     chart.setDataTable(data); 
     chart.setOptions(options); 
     chart.draw(); 
} 

function drawChart2() { 
    chart.setChartType('AreaChart'); 
     chart.setDataTable(data2); 
     chart.setOptions(options); 
     chart.draw(); 
} 

function drawChart3() { 
    chart.setChartType('LineChart'); 
     chart.setDataTable(data); 
     chart.setOptions(options); 
     chart.draw(); 
} 

function drawChart4() { 
    chart.setChartType('ColumnChart'); 
     chart.setDataTable(data2); 
     chart.setOptions(options); 
     chart.draw(); 
} 

button1.onclick = function() { 
    drawChart1(); 
} 

button2.onclick = function() { 
    drawChart2(); 
} 

button3.onclick = function() { 
    drawChart3(); 
} 

button4.onclick = function() { 
    drawChart4(); 
} 

drawChart1(); 
}