Question

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

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

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

$(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格式。我的数据是第二格式，所以我需要纠正一件事。

第二个问题是我的数据来源忽略了夏令时（因此小时转移）。一旦我解释了这两个问题，我的图表轴终于出现了。

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

1 个答案: