在特定日期/时间开始时间序列 Highcharts 图

Question

我开始使用 Highcharts JS 库，但在特定日期和时间启动图表时遇到了一些问题。该图表是一个流计图表，因此我的 X 值是日期/时间（EPOCH 格式），y 值是量规高度。

我希望我的图表涵盖从今天午夜开始的 3 天，即今天日期的前 2 天。我正在尝试使用 'pointStart' 来建立图表 x 值的开头，但它不太有效。我得到了三天的时间跨度，但起点不是所需的午夜。

我做错了什么？这是我完整的 highcharts 代码：

$(function () {
    $('#gChart').highcharts({
        chart: {
            type: 'spline',
            margin: [20,40,50,60]
        },
        legend: {
            enabled: false
        },
        title: {
            text: null
        },
        xAxis: {
            title: {
                text: 'Date',
                style: {
                    color: 'black',
                    fontWeight: 'bold'
                }
            },          
            type: 'datetime',
            gridLineWidth: 1,
            lineWidth: 1,
            lineColor: 'black',
            labels: {
                formatter: function () {
                    var curVal = this.value;
                    var dt = new Date();
                    theDate = new Date(eval(eval(curVal + 28800) * 1000));

                    if (theDate.toString('h tt') == "0 AM") {
                        var t = theDate.toString('M/d/yyyy');
                    } else {
                        var t = theDate.toString('htt');
                    }
                    return t;

                },
                style: {
                    color: 'black'
                }
            },
            startOnTick: true,
            endOnTick: true,
            gridLineColor: '#222',
            tickInterval: 86400,
            minRange: 259200,
            minorGridLineColor: 'red',
            startOnTick: true,
            plotlines: [{
                color: 'black',
                label: {
                    text: 'Last Update',
                    align: 'Right',
                    style: {
                        color: 'black',
                        fontWeight: 'bold',
                    }
                },
                value: theData[theData.length-1].x,
                width: 1                    
            }]
        },
        yAxis: {
            title: {
                text: 'Stage (Ft)',
                style: {
                    color: 'black',
                    fontWeight: 'bold'
                }
            },
            lineWidth: 1,
            lineColor: 'black',
            min: chartProps["lowGraph"],
            max: chartProps["highGraph"],
            minorGridLineWidth: 0,
            gridLineWidth: 1,
            alternateGridColor: null,
            startOnTick: true,
            plotLines: [{ // Flood Stage 2
                value: chartProps["floodPhase2"],
                dashStyle: 'Dash',
                color: '#FFDC14', //Yellow
                width: '4',
                label: {
                    text: 'FLOOD STAGE 2',
                    align: 'center',
                    style: {
                        color: '#FFDC14', //Yelow
                        fontWeight: 'bold',
                        fontSize: '10pt'
                    }
                }
            }, { // Flood Stage 3
                value: chartProps["floodPhase3"],
                dashStyle: 'Dash',                  
                color: '#FFA500',
                width: '4',
                label: {
                    text: 'FLOOD STAGE 3',
                    align: 'center',
                    style: {
                        color: '#FFA500',
                        fontWeight: 'bold',
                        fontSize: '10pt'
                    }
                }
            }, { // Flood Stage 4
                value: chartProps["floodPhase4"],
                dashStyle: 'Dash',                  
                color: 'red',
                width: '4',
                label: {
                    text: 'FLOOD STAGE 4',
                    align: 'center',
                    style: {
                        color: 'red',
                        fontWeight: 'bold',
                        fontSize: '10pt'
                    }
                }
            }]
        },
        tooltip: {
            valueSuffix: ' ft',
            formatter: function() {
                var curVal = this.x;
                var dt = new Date();
                theDate = new Date(eval(eval(curVal + 28800) * 1000));
                var d = theDate.toString('M/d/yyyy');
                if (theDate.toString('h') == "0") {
                    var t = "12:" + theDate.toString('mm tt');
                } else {
                    var t = theDate.toString('h:mm tt');
                }
                theString = d + ' @ ' + t + '<br><b>Gage Height: ' + this.y + ' Ft</b>';
                return theString;
            }
        },
        plotOptions: {
            spline: {
                lineWidth: 2,
                states: {
                    hover: {
                        lineWidth: 2
                    }
                },
                marker: {
                    enabled: false
                },
                pointInterval: 900, // 5 minutes
                pointStart: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()-2,0,0,0,0)
            }
        },
        series: [{
            name: 'Gage Height',
            data: theData
        }]
        ,
        navigation: {
            menuItemStyle: {
                fontSize: '10px'
            }
        }
    });
});

Answer 1

事实证明，我有很多事情发生，导致图表无法按我想要的方式显示。首先，当您为图表的轴指定 dateTime 类型时，Highcharts 假定日期信息是毫秒 Epoch 格式。我拥有的数据是 second 格式的，所以这是我需要更正的一件事。

第二个问题是我的数据源忽略了夏令时（因此是小时班次）。一旦我解决了这两个问题，我的图表的轴终于按原样出现了。