Javascript 谷歌图表：在折线图和柱状图之间切换_Javascript_Google Visualization_Bar Chart_Linechart

Javascript 谷歌图表：在折线图和柱状图之间切换

javascript google-visualization

Javascript 谷歌图表：在折线图和柱状图之间切换,javascript,google-visualization,bar-chart,linechart,Javascript,Google Visualization,Bar Chart,Linechart,我有一个仪表板，上面有一些谷歌分析指标。我想在逐日、逐月和逐周的图表上绘制这些指标。日复一日的图表是折线图，其他的是柱状图我能够让图表最初绘制为直线或条形图，然后让它以不同的类型重新绘制，但之后它不会再次重新绘制这是一个基本的、简化的例子，我用它来解释我的情况： <!DOCTYPE html> 试验 //加载可视化API和piechart包。 load（'visualization'，'1.0'，{'packages'：['corechart']}）； //将回调设置为

我有一个仪表板，上面有一些谷歌分析指标。我想在逐日、逐月和逐周的图表上绘制这些指标。日复一日的图表是折线图，其他的是柱状图

我能够让图表最初绘制为直线或条形图，然后让它以不同的类型重新绘制，但之后它不会再次重新绘制

这是一个基本的、简化的例子，我用它来解释我的情况：

<!DOCTYPE html>


试验
//加载可视化API和piechart包。
load（'visualization'，'1.0'，{'packages'：['corechart']}）；
//将回调设置为在加载Google Visualization API时运行。
setOnLoadCallback（初始化）；
函数初始化（）{
var chart=new google.visualization.ColumnChart（document.getElementById（'chart-div'））；
var line=new google.visualization.LineChart（document.getElementById（'chart-div'）；
var数据=[]；
data[0]=新的google.visualization.DataTable（）；
数据[0]。添加列（'string'，'x'）；
数据[0]。添加列（'number'，'A'）；
数据[0]。添加列（'number'，'B'）；
数据[0]。添加行（[A'，123，40]）；
数据[0]。添加行（['B'，17,20]）；
data[1]=新的google.visualization.DataTable（）；
数据[1]。addColumn（'string'，'x'）；
数据[1]。添加列（'number'，'C'）；
数据[1]。添加列（'number'，'D'）；
数据[1].addRow（[C'，222，13]）；
数据[1].addRow（[D'，542,80]）；
变量选项={
宽度：400，
身高：240，
变量：{minValue:0，maxValue:1000}，
动画：{
持续时间：1000，
放松：“退出”
}
};
var barsButton=document.getElementById（'b1'）；
var lineButton=document.getElementById（'b2'）；
函数绘图图（）{
图表绘制（数据[0]，选项）；
}
函数drawLine（）{
线条绘制（数据[1]，选项）；
}
barsButton.onclick=函数（）{
牵引杆（）；
}
lineButton.onclick=函数（）{
抽绳（）；
}
图纸（）；
}

您应该使用

这样，您只需要一个图表对象

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

然后可以使用

.setChartType

方法更改其类型

 var barsButton = document.getElementById('b1');
 var lineButton = document.getElementById('b2');

 chart.setOptions(options);

 function drawBars() {
     chart.setChartType('ColumnChart');
     chart.setDataTable(data[0]);
     chart.draw();
 }

 function drawLine() {
     chart.setChartType('LineChart');
     chart.setDataTable(data[1]);
     chart.draw();
 }

 barsButton.onclick = function () {
     drawBars();
 }

 lineButton.onclick = function () {
     drawLine();
 }
 drawBars();

演示在

 var barsButton = document.getElementById('b1');
 var lineButton = document.getElementById('b2');

 chart.setOptions(options);

 function drawBars() {
     chart.setChartType('ColumnChart');
     chart.setDataTable(data[0]);
     chart.draw();
 }

 function drawLine() {
     chart.setChartType('LineChart');
     chart.setDataTable(data[1]);
     chart.draw();
 }

 barsButton.onclick = function () {
     drawBars();
 }

 lineButton.onclick = function () {
     drawLine();
 }
 drawBars();