谷歌图表：在线图和柱形图之间切换 [英] Google Charts: Switching between Line and Column charts
本文介绍了谷歌图表：在线图和柱形图之间切换的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个仪表板，其中包含一些Google Analytics指标。我希望在逐日，逐月和逐周图表上绘制这些指标。线图中的每日图表，但其他图表则是柱形图。
我可以让图表最初绘制为线或条图表，然后让它重绘为另一种类型，但在此之后它不会重新绘制！
这是我设置的一个基本简化示例解释我的情况：
<！DOCTYPE html>
< HEAD>
< title>测试< /标题>
<！ - 加载AJAX API - >
< script type =text / javascriptsrc =https://www.google.com/jsapi>< / script>
< script type =text / javascript>
//加载可视化API和饼图包。
google.load（'visualization'，'1.0'，{'packages'：['corechart']}）;
//设置回调以在加载Google Visualization API时运行。
google.setOnLoadCallback（initialize）;
函数initialize（）{
var chart = new google.visualization.ColumnChart（document.getElementById（'chart-div'））;
var line = new google.visualization.LineChart（document.getElementById（'chart-div'））;
var data = [];
data [0] = new google.visualization.DataTable（）;
data [0] .addColumn（'string'，'x'）;
data [0] .addColumn（'number'，'A'）;
data [0] .addColumn（'number'，'B'）;
data [0] .addRow（['A'，123，40]）;
data [0] .addRow（['B'，17，20]）;
data [1] = new google.visualization.DataTable（）;
data [1] .addColumn（'string'，'x'）;
data [1] .addColumn（'number'，'C'）;
data [1] .addColumn（'number'，'D'）;
data [1] .addRow（['C'，222，13]）;
data [1] .addRow（['D'，542，80]）;
var options = {
width：400，
height：240，
vAxis：{minValue：0，maxValue：1000}，
动画： {
持续时间：1000，
缓动：'出'
}
};
var barsButton = document.getElementById（'b1'）;
var lineButton = document.getElementById（'b2'）;
函数drawChart（）{
chart.draw（data [0]，options）;
函数drawLine（）{
line.draw（data [1]，options）;
}
barsButton.onclick = function（）{
drawBars（）;
}
lineButton.onclick = function（）{
drawLine（）;
}
drawChart（）;
}
< / script>
< / head>
< body>
< input type ='button'id ='b1'value ='Draw Column Chart'/>
< input type ='button'id ='b2'value ='Draw Line Chart'/>
< div id =chart-div>< / div>
< / body>
解决方案
I have a dashboard with some Google Analytics metrics being pulled in. I want to chart these metrics on a Day-By-Day, Month-By-Month, and Week-By-Week chart. The Day-By-Day chart in a Line Chart, but the others are Column Charts.
I'm able to get the chart to draw initially as a Line or Bar Chart, and then get it to redraw as a different type, but after that it won't redraw again!
This is a basic, simplified example I've set up to explain my situation:
<!DOCTYPE html>
<head>
<title>Test</title>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(initialize);
function initialize() {
var chart = new google.visualization.ColumnChart(document.getElementById('chart-div'));
var line = new google.visualization.LineChart(document.getElementById('chart-div'));
var data = [];
data[0] = new google.visualization.DataTable();
data[0].addColumn('string', 'x');
data[0].addColumn('number', 'A');
data[0].addColumn('number', 'B');
data[0].addRow(['A', 123, 40]);
data[0].addRow(['B', 17, 20]);
data[1] = new google.visualization.DataTable();
data[1].addColumn('string', 'x');
data[1].addColumn('number', 'C');
data[1].addColumn('number', 'D');
data[1].addRow(['C', 222, 13]);
data[1].addRow(['D', 542, 80]);
var options = {
width: 400,
height: 240,
vAxis: {minValue:0, maxValue:1000},
animation: {
duration: 1000,
easing: 'out'
}
};
var barsButton = document.getElementById('b1');
var lineButton = document.getElementById('b2');
function drawChart() {
chart.draw(data[0], options);
}
function drawLine() {
line.draw(data[1], options);
}
barsButton.onclick = function() {
drawBars();
}
lineButton.onclick = function() {
drawLine();
}
drawChart();
}
</script>
</head>
<body>
<input type = 'button' id = 'b1' value = 'Draw Column Chart' />
<input type = 'button' id = 'b2' value = 'Draw Line Chart' />
<div id="chart-div"></div>
</body>
解决方案
You should use the ChartWrapper object
This way you only need one charting object
var chart = new google.visualization.ChartWrapper({
containerId: 'chart-div'
});
and then you can change its type with the .setChartType method
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();
Demo at http://jsfiddle.net/gaby/Xmj6j/
这篇关于谷歌图表：在线图和柱形图之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
