javascript - Google Charts - 面积图未正确划分网格线

Question

我尝试创建一个二十四小时图表，显示每三小时周期的平均风向(以度为单位)。我希望网格线以 45 度为增量，所以我指定了一个 viewWindow: {min: 0, max: 360}, gridlines: {count: 9}} 我希望给我 0 度的网格线， 45, 90, 135, 180, 225, 270, 315 和 360 但是由于某种原因，Google Charts 给了我 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 中渲染它，这是撰写本文时的最新版本。

任何帮助将不胜感激

Answer 1

由于您确切地知道希望网格线出现在什么值上，因此最简单的方法是指定 vAxis.ticks 选项:

vAxis: {
    ticks: [0, 45, 90, 135, 180, 225, 270, 315, 360]
}

例如:http://jsfiddle.net/asgallant/K4Gnh/7/