起始时间序列高位图在特定日期/时间绘制

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

我希望我的图表涵盖从午夜开始的3天，即今天日期前2天。我试图使用"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'
            }
        }
    });
});