Javascript 如何添加按钮在仪表板中的两种谷歌图表之间切换

我有一个折线图和一个daterangefilter应用于该折线图，这是我目前的代码

function go(){

 window.setTimeout( function(){
var p=0;
var table = document.getElementById('mytable');
var rows = table.getElementsByTagName('tr');
var i, j, cells;
var distance=[];
var date=[];
var entryid=[];
j=rows.length;
for (i = 1; i < j; i++) {
cells = rows[i].getElementsByTagName('td');
if (!cells.length) {
    continue;
}
distance[i-1] = parseInt(cells[1].innerHTML);
date[i-1]=new Date(reverse(cells[2].innerHTML));
entryid[i-1]=cells[0].innerHTML;
}
var c=[];
for (var z=0;z<distance.length;z++){
c.push([date[z],distance[z]]);
}
/*document.getElementById('cvs').innerHTML=c;*/
function reverse(f){
var g=f.split("/");
var goodstr=g[1]+"/"+g[2]+"/"+g[0];
return goodstr;
}
google.charts.load('44', {
callback: drawBackgroundColor,
packages: ['corechart','controls']
});
function drawBackgroundColor() {

var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Distance');

data.addRows(c);

var options = {
hAxis: {
  title: 'Date'
},
vAxis: {
  title: 'Distance Ran'
},
backgroundColor: '#f1f8e9'
};
var control;
var chartWrapper;
var dash;
dash = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
var controlOptions = {
    filterColumnIndex: 0
};
///////////////////////////


control = new google.visualization.ControlWrapper({
controlType: 'DateRangeFilter',
containerId: 'control_div',
options: controlOptions
});


chartWrapper = new google.visualization.ChartWrapper({
chartType:'LineChart',//'LineChart', //'LineChart',
containerId: 'cvs',
options: options
});

dash.bind([control], [chartWrapper]);

dash.draw(data);

}
}, 5 * 1000 );

函数go（）{ setTimeout（函数（）{ var p=0； var table=document.getElementById（'mytable'）； var rows=table.getElementsByTagName（'tr'）； varⅠ，j，细胞； var距离=[]； var日期=[]； var entryid=[]； j=行数。长度； 对于（i=1；i对于（var z=0；z请看文档中的示例：

这似乎正是你所需要的

像这样的东西应该有用

document.getElementById('b2').addEventListener("click", changeType);
          function changeType(){
            chartWrapper.setChartType('ColumnChart');
            chartWrapper.draw();
          }

---

您可以使用

chartWrapper.setChartType（type）

切换图表类型，然后重新绘制图表以查看更改…我在dashboard div中添加了一个按钮，并给它一个id=“b2”，并在回调函数var barsButton=document.getElementById（'b2'）；google.visualization.events.addListener（barsButton，'click'，function（）{chartWrapper.setChartType（'BarChart'）；}）中添加了此代码；但在这之后它就没有任何效果了put chartWrapper.draw（）；类似于函数changeType（）{programmaticChart.setChartType（'ColumnChart'）；programmaticChart.draw（）；}非常感谢rick，你的代码工作了，为什么你的代码工作了，而不是这个变量barsButton=document.getElementById（'b2'）；google.visualization.events.addListener（barsButton，'click'，function（）{chartWrapper.setChartType（'BarChart'）；}）；，是范围问题吗？