ChartWrapper不显示图形
ChartWrapper is not displaying the graph
我正在使用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:DashBoard -> DashBoard
错误:new google.visualization.DashBoard(document.getElementById('chart')).bind(timelinePicker, lineChart).draw(data);
正确的:新google.visualization.Dashboard (. getelementbyid("图表"))。bind (timelinePicker lineChart)却是(数据);"
错误#2:TimeLine -> TimeLine
错误:'filterColumnLabel': 'Timeline',
右:'filterColumnLabel': 'TimeLine',
错误#3:chart -> dashboard
错误: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(你有两个div与'chart' id):
<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图形绘制库可以进行气球树布局
- 如何在d3上的图形中添加放大和缩小按钮
- 如何在React Native中绘制图形
- 删除图形和数字之间的连字符(-)符号
- 在arcgis javascript中手动添加图形层的图例
- Javascript图形布局引擎
- 来自mysql的动态值用于html代码点火器视图中的图形
- Javascript图形可视化工具包,具有高性能(500-1000个节点)
- 标签的rggraph问题Above未出现在第二个图形创建中
- Facebook:当发布期望对象引用时显示打开的图形对话框
- NVD3.js多图形,具有固定的x轴和y轴
- D3.js强制布局带有外部数据的图形空白
- 使用Javascript的图形编辑器
- 将两个图形(饼图和条形图)并排对齐::d3-js
- 动态Facebook开放式图形标记-javascript
- 通过变量将数据添加到图形中
- 没有使用Highcharts显示任何图形
- 能够在Highcharts中看到值,但不能看到图形
- 来自facebook图形API的响应中出错
- 将JavaScript图形和图表转换为图像