javascript - Highchart 刻度间隔

标签 javascript highcharts pchart

我似乎无法弄清楚如何正确设置我的滴答间隔。
需要在 X 轴上有一个小时的刻度。
数据是基于分钟的。

Javascript:

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'spline'
            },
            title: {
                text: 'Temperature Today'
            },
            xAxis: {
                type: "datetime",
                categories: time,
                dateTimeLabelFormats: {
                    day: '%h'
                },
                minTickInterval: 24 * 36000000 * 1000,
            },
            yAxis: {
                title: {
                    text: 'Temperature'
                },
                minorGridLineWidth: 0,
                gridLineWidth: 0,
                alternateGridColor: null
            },
            tooltip: {
                formatter: function() {
                        return ''+
                        Highcharts.dateFormat('%e. %b %Y, %H:00', this.x) +': '+ this.y;
                }
            },
            plotOptions: {
                spline: {
                    lineWidth: 4,
                    states: {
                        hover: {
                            lineWidth: 5
                        }
                    },
                    marker: {
                        enabled: false,
                        states: {
                            hover: {
                                enabled: true,
                                symbol: 'circle',
                                radius: 5,
                                lineWidth: 1
                            }
                        }
                    },
                }
            },
            series: [{
                name: 'Asen',
                data: temp
            }]
            ,
            navigation: {
                menuItemStyle: {
                    fontSize: '6px'
                }
            }
        });
    });

});

数据数组:

temp = [-4.39,-4.39,-4.33,-4.33,-4.33,-4.33,-4.33]
time = [1359910725000,1359910786000,1359910848000,1359910908000,1359910968000,1359911028000,1359911089000,1359911150000]

最佳答案

首先,删除 xAxis 上的“类别”属性,这在日期时间轴上没有任何意义。请注意,日期时间轴基于毫秒,因此一小时的间隔表示为 3600 * 1000。参见 API highcharts, tickInterval

将此配置用于 xAxis。

xAxis: {
        type: "datetime",    
        dateTimeLabelFormats: {
            day: '%H'
        },
        tickInterval: 3600 * 1000
}, 

有关 JS Bin 的工作演示,请参见此处.

关于javascript - Highchart 刻度间隔,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14677589/

相关文章:

javascript - 从 javascript 中的对象数组替换模板中的键

javascript - 为什么 fillRect 命令不允许创建命中区域,而 rect 和 fill 的组合却可以?

highcharts - 集成 ng2-highcharts 时出现问题

php - 使用 pchart 创建的图表超时

javascript - 使用 JavaScript 或 Angular CLI 将视频文件作为 blob 上传到 AWS S3

javascript - AngularFire/Firestore - 将集合和文档作为服务返回

highcharts 动态更改导出选项

javascript - 使用 React Native Webview 添加本地 HTML 和 JS 文件

MySQL:选择查询,5 分钟增量

pchart - 如何使用 pChart 指定自定义 y 轴刻度间隔