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

用户名

我试图创建一个二十四小时的图表,显示每三个小时的平均风向,以度为单位。我想使网格线以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]
}

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

图表js网格线未删除

来自分类Dev

如何在Google图表中添加更多网格线?

来自分类Dev

Google图表未显示

来自分类Dev

Google图表多线动态图表

来自分类Dev

加载后如何在Google图表上添加虚线网格线?

来自分类Dev

删除Google图表时间轴周围的边框和网格线

来自分类Dev

SVG线未显示在Google图表上?

来自分类Dev

Google图表趋势线未显示

来自分类Dev

SVG线未显示在Google图表上?

来自分类Dev

iOS图表更改网格线颜色

来自分类Dev

在图表前面显示Excel网格线?

来自分类Dev

如何使图表中的网格线静态

来自分类Dev

如何在Google图表中的图表区域周围绘制边框?

来自分类Dev

Google图表:工具提示中的图表未显示

来自分类Dev

Google Charts图表区域超出范围

来自分类Dev

如何使用Google图表绘制多条线

来自分类Dev

如何获取线标签值(Google图表)

来自分类Dev

Google图表-堆积柱形图的趋势线

来自分类Dev

Google图表:标记堆积的柱形图

来自分类Dev

使Google图表行占据整个面积图

来自分类Dev

在Google图表上书写文字(象限图)

来自分类Dev

Google图表:标记堆积的柱形图

来自分类Dev

Google图表-未捕获的错误:不是数组

来自分类Dev

Google图表未捕获的错误:不是数组

来自分类Dev

数据未显示在Google图表中

来自分类Dev

未显示Google Analytic Embed API图表

来自分类Dev

Google图表中未添加Segoe字体

来自分类Dev

Google图表-未捕获的错误:不是数组

来自分类Dev

Google图表未捕获的错误:不是数组