我有一个仪表板，其中包含一些 Google Analytics(分析)指标。我想在每日、每月和每周图表上绘制这些指标。 Day-By-Day图表在折线图中，其他都是柱形图。
我能够让图表最初绘制为折线图或条形图，然后将其重新绘制为不同类型，但之后它不会再次重新绘制!
这是我为解释我的情况而设置的一个基本的简化示例:
<!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>
最佳答案
你应该使用 ChartWrapper object
这样你只需要一个图表对象
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();
关于javascript - 谷歌图表 : Switching between Line and Column charts，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21170147/