Javascript 在特定日期/时间绘制开始时间序列图表

我刚开始使用Highcharts JS库，但在特定日期和时间启动图表时遇到了一些问题。该图表是一个流量表图表，因此我的X值是一个日期/时间（历元格式），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'
            }
        }
    });
});

$（函数（）{
$（'#gChart'）。高图({
图表：{
类型：“样条线”，
保证金：[20,40,50,60]
},
图例：{
已启用：false
},
标题：{
文本：空
},
xAxis：{
标题：{
文本：“日期”，
风格：{
颜色：'黑色'，
fontWeight:“粗体”
}
},          
键入：“日期时间”，
网格线宽度：1，
线宽：1，
线条颜色：“黑色”，
标签：{
格式化程序：函数（）{
var curVal=该值；
var dt=新日期（）；
日期=新日期（eval（eval（curVal+28800）*1000））；
如果（日期至字符串（'h tt'）==“0 AM”）{
var t=日期toString（'M/d/yyyy'）；
}否则{
var t=日期toString（'htt'）；
}
返回t；
},
风格：{
颜色：“黑色”
}
},
是的，
恩东蒂克：是的，
gridLineColor:“#222”，
时间间隔：86400，
minRange:259200，
minorGridLineColor:“红色”，
是的，
绘图线：[{
颜色：'黑色'，
标签：{
文本：“上次更新”，
对齐：“右”，
风格：{
颜色：'黑色'，
fontWeight:'粗体'，
}
},
值：theData[theData.length-1].x，
宽度：1
}]
},
亚克斯：{
标题：{
正文：“舞台（Ft）”，
风格：{
颜色：'黑色'，
fontWeight:“粗体”
}
},
线宽：1，
线条颜色：“黑色”，
min:chartProps[“lowGraph”]，
max:chartProps[“highGraph”]，
minorGridLineWidth:0，
网格线宽度：1，
alternateGridColor:null，
是的，
绘图线：[{//洪水水位2
值：chartProps[“洪水阶段2”]，
dashStyle:“Dash”，
颜色：'#FFDC14'，//黄色
宽度：'4'，
标签：{
正文：“洪水阶段2”，
对齐：'居中'，
风格：{
颜色：'#FFDC14'，//黄色
fontWeight:'粗体'，
字体大小：“10磅”
}
}
}，{//3级洪水
值：chartProps[“洪水阶段3”]，
dashStyle:“Dash”，
颜色：'#FFA500'，
宽度：'4'，
标签：{
正文：“洪水阶段3”，
对齐：'居中'，
风格：{
颜色：'#FFA500'，
fontWeight:'粗体'，
字体大小：“10磅”
}
}
}，{//4级洪水
值：chartProps[“洪水阶段4”]，
dashStyle:“Dash”，
颜色：“红色”，
宽度：'4'，
标签：{
正文：“洪水期4”，
对齐：'居中'，
风格：{
颜色：“红色”，
fontWeight:'粗体'，
字体大小：“10磅”
}
}
}]
},
工具提示：{
valueSuffix:'英尺'，
格式化程序：函数（）{
var curVal=this.x；
var dt=新日期（）；
日期=新日期（eval（eval（curVal+28800）*1000））；
var d=日期toString（'M/d/yyyy'）；
if（日期toString（'h'）=“0”）{
var t=“12:+日期到字符串（'mm tt'）；
}否则{
var t=日期toString（'h:mm tt'）；
}
管柱=d+'@'+t+'
标距高度：'+this.y+'Ft'；
返回字符串；
}
},
打印选项：{
样条曲线：{
线宽：2，
国家：{
悬停：{
线宽：2
}
},
标记：{
已启用：false
},
点间隔：900，//5分钟
点开始：新日期（新日期（）.getFullYear（），新日期（）.getMonth（），新日期（）.getDate（）-2,0,0,0）
}
},
系列：[{
名称：“测量高度”，
数据：theData
}]
,
导航：{
菜单项样式：{
字体大小：“10px”
}
}
});
});

事实证明，我有很多事情在进行，这使得图表无法以我想要的方式出现。首先，当您指定日期时