我正在使用 google-chart-api 使用 ChartWrapper 类和 ControlWrapper 类绘制图表。这是我一直在使用的代码。
这是加载硬编码数据的函数。
function drawVisualization() {
// Prepare the data
var data = google.visualization.arrayToDataTable([
['TimeLine', 'Time-Option', 'LOC', 'Comments'],
['Monthly', '1', 200, 20],
['Monthly', '2', 300, 30],
['Weekly', '1', 150, 15],
['Weekly', '3', 35, 3],
['Daily', '1', 230, 23],
['Daily', '2', 178, 17],
]);
这是我的 ControlWrapper。
var timelinePicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control',
'options': {
'filterColumnLabel': 'Timeline',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
这是我的 ChartWrapper。
var lineChart = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart',
'options': {
'width': 900,
'height': 500,
'chartArea': {top: 0, right: 0, bottom: 0}
},
'view': {'columns': [1, 2]}
});
new google.visualization.DashBoard(document.getElementById('chart')).bind(timelinePicker, lineChart).draw(data);
}
google.setOnLoadCallback(drawVisualization);
要查看图表，
<body>
<div id="chart">
<table>
<tr style='vertical-align: top'>
<td style='width: 300px; font-size: 0.9em;'>
<div id="control"></div>
</td>
<td style='width: 600px'>
<div style="float: left;" id="chart"></div>
</td>
</tr>
</table>
</div>
</body>
但是，我仍然没有得到任何输出。知道这里出了什么问题吗？
最佳答案
强烈建议:始终首先尝试调试自己的代码。其中有很多粗心的错误，如果您使用 firebug 等来捕获错误，很容易发现这些错误。
错误 #1:仪表板 -> 仪表板
错误:new google.visualization.DashBoard(document.getElementById('chart')).bind(timelinePicker, lineChart).draw(data);
右: 新的 google.visualization.Dashboard(document.getElementById('chart')).bind(timelinePicker, lineChart).draw(data);`
错误 #2:时间线 -> 时间线
错误:'filterColumnLabel':'时间轴'，
右:'filterColumnLabel':'TimeLine'，
错误 #3:图表 -> 仪表板
错误:new google.visualization.Dashboard(document.getElementById('chart')).bind(timelinePicker, lineChart).draw(data);
右:new google.visualization.Dashboard(document.getElementById('dashboard')).bind(timelinePicker, lineChart).draw(data);
同时更正 HTML(您有两个带有“chart”id 的 div):
<body>
<div id="dashboard">
<table>
<tr style='vertical-align: top'>
<td style='width: 300px; font-size: 0.9em;'>
<div id="control"></div>
</td>
<td style='width: 600px'>
<div style="float: left;" id="chart"></div>
</td>
</tr>
</table>
</div>
</body>
最终工作版本
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['controls']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Prepare the data
var data = google.visualization.arrayToDataTable([
['TimeLine', 'Time-Option', 'LOC', 'Comments'],
['Monthly', '1', 200, 20],
['Monthly', '2', 300, 30],
['Weekly', '1', 150, 15],
['Weekly', '3', 35, 3],
['Daily', '1', 230, 23],
['Daily', '2', 178, 17],
]);
var timelinePicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control',
'options': {
'filterColumnLabel': 'TimeLine',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
var lineChart = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart',
'options': {
'width': 900,
'height': 500,
'chartArea': {top: 0, right: 0, bottom: 0}
},
'view': {'columns': [1, 2]}
});
new google.visualization.Dashboard(document.getElementById('dashboard')).bind(timelinePicker, lineChart).draw(data);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="dashboard">
<table>
<tr style='vertical-align: top'>
<td style='width: 300px; font-size: 0.9em;'>
<div id="control"></div>
</td>
<td style='width: 600px'>
<div style="float: left;" id="chart"></div>
</td>
</tr>
</table>
</div>
</body>
</html>
关于javascript - ChartWrapper 不显示图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15545596/