我试图创建一个二十四小时的图表,显示每三个小时的平均风向,以度为单位。我想使网格线以45度为增量,因此我指定了一个viewWindow:{min:0,max:360},gridlines:{count:9}},我希望可以将我的网格线设置为0, 45、90、135、180、225、270、315和360,但是由于某些原因,Google图表在0、40、80、120、160、200、240、280和320处给我网格线,而在即使在此处绘制点,所有操作都在360度进行。我已经创建了工作代码的精简版:
`google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(wind_history_render);
function wind_history_render() {
var wind_history_data = google.visualization.arrayToDataTable([
['Time', 'Direction'],
['00', 170],
['03', 190],
['06', 90],
['09', 360],
['12', 280],
['15', 300],
['18', 0],
['21', 320]
]);
var wind_history_options = {
title: 'Summit 24 Hour Wind History',
width: '100%',
height: '100%',
legend: {
position: 'none'
},
axisTitlesPosition: 'out',
areaOpacity: 0.0,
series: {
0: {
color: "purple",
targetAxisIndex: 0,
pointSize: 5,
lineWidth: 0
}
},
vAxes: {
0: {
title: 'Direction',
titleTextStyle: {
color: 'purple',
italic: false,
bold: true
},
textStyle: {
bold: true
},
viewWindow: {
min: 0,
max: 360
},
gridlines: {
count: 9
}
}
},
hAxis: {
textStyle: {
bold: true
}
}
};
var windHistoryChart = new google.visualization.AreaChart(document.getElementById('windspeed-and-direction'));
windHistoryChart.draw(wind_history_data, wind_history_options);
}`
此处的jsfiddle工作示例:http://jsfiddle.net/rpushor88/K4Gnh/3/演示发生了什么。我已尝试在IE 11和Chrome版本35.0.1916.153 m中渲染此图像,这是撰写本文时的最新版本。
任何帮助将不胜感激
由于您确切知道要在网格线上显示的值,因此最简单的方法是指定以下vAxis.ticks
选项:
vAxis: {
ticks: [0, 45, 90, 135, 180, 225, 270, 315, 360]
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句