Question

我试图创建一个二十四小时的图表，显示每三个小时的平均风向度。我希望网格线以45度为增量，所以我指定了一个viewWindow：{min：0，max：360}，gridlines：{count：9}}我希望它给我0的网格线， 45,90,135,180,225,270,315和360但是由于某种原因谷歌图表给我网格线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]
}

ex：http://jsfiddle.net/asgallant/K4Gnh/7/

Google图表 - 区域图表未正确划分网格线

1 个答案: