按照上面的标题,有人知道为什么吗?我的代码如下,顺便说一下,我正在使用Google Chart Playground来测试它,http://code.google.com/apis/ajax/playground/?type=visualization#area_chart。请指教,谢谢!
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Hour', 'Sales', 'Expenses'],
['0:00', 1000, 500],
['1:00', 1170, 604],
['2:00', 660, 302],
['3:00', 1030, 827],
['4:00', 1222, 86]
]);
var options = {
areaOpacity: 0.7,
backgroundColor:{
color: 'none',
fill: 'none',
},
animation:{
easing: 'inAndOut',
},
hAxis: {gridlines: {color: '#000000', count: 3}},
vAxis: {gridlines: {color: '#DCDCDC', count: 5}},
tooltipTextStyle: {color: '#444444', fontName: 'Tahoma', fontSize: 12},
focusTarget: 'category',
series: {
0:{color: '#207795', lineWidth: 4, pointSize: 10},
1:{color: '#464A54', lineWidth: 4, pointSize: 10},
},
legend: 'none',
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
答案 0 :(得分:3)
要获得垂直网格线,您必须设置hAxis网格线(完成)并将x轴数据类型更改为连续数据类型。请参阅Customizing Axes/Terminology和面积图:配置选项:hAxis.gridlines description。
而不是
var data = google.visualization.arrayToDataTable([
['Hour', 'Sales', 'Expenses'],
['0:00', 1000, 500],
['1:00', 1170, 604],
['2:00', 660, 302],
['3:00', 1030, 827],
['4:00', 1222, 86]
]);
你必须提供例如:
var data = google.visualization.arrayToDataTable([
['Hour', 'Sales', 'Expenses'],
[0, 1000, 500],
[1, 1170, 604],
[2, 660, 302],
[3, 1030, 827],
[4, 1222, 86]
]);
注意小时数据不再是字符串。如果您将count
的{{1}}值更改为5,则每小时都会显示垂直线:
答案 1 :(得分:1)
代码没有任何错误,您在标记中遗漏了chart_div
..
<div id="chart_div"></div>
参见演示