开始时间系列Highcharts在特定日期/时间绘制 [英] Starting Time Series Highcharts Plot at specific date/time
问题描述
我开始使用Highcharts JS库，并且在特定日期和时间开始我的图表时遇到一些麻烦。图表是一个流量表图表，所以我的X值是一个日期/时间（以EPOCH格式），y值是一个量表高度。
我希望我的图表能够在今天的日期前2天从午夜开始覆盖3天。我正在尝试使用'pointStart'来建立我的图表的x值的开始，但它并不工作。我得到我的三天时间跨度，但起点不是所需的午夜。
我做错了什么？这里是我的完整的highcharts代码：
$（function（）{
$（'＃gChart'）。highcharts（ {
图：{
类型：'spline'，
保证金：[20,40,50,60]
}，
图例：{
启用：false
}，
title：{$ b $ text：null
}，
xAxis：{
title：{
text：'日期'，
风格：{
颜色：'black'，
fontWeight：'bold'
}
}，
类型：'datetime'，
gridLineWidth：1，
lineWidth：1，
lineColor：'black'，
labels：{
formatter：function（）{
var curVal = this.value;
var dt = new Date（）;
theDate = new Date（eval（eval（c如果（theDate.toString（'h tt'）==0 AM）{
var t = theDate.toString（'M / urVal + 28800）* 1000））;
if d / yyyy的'）;
} else {
var t = theDate.toString（'htt'）;
}
return t;
$ b $ 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'，
颜色：'＃FFDC14'，//黄色
宽度：'4'，
标签：{
文字：'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 '，
宽度：'4'，
标签：{
文字：'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>';
返回theString;
}
plotOptions：{
spline：{
lineWidth：2，
states：{
hover：{
线宽：2
}
}，
标记：{
启用：false
}，
pointInterval：900，// 5分钟$ b $ （），new Date（）。getMonth（），new Date（）。getDate（） - 2,0,0,0,0）
}
$，
系列：[{
name：'Gage Height'，
data：theData
}]
，
navigation：{
menuItemStyle：{
fontSize：'10px'
}
}
}）;
}）;
事实证明，我有很多事情要做这阻止了图表以我想要的方式出现。首先，当您为统计图的坐标轴指定dateTime类型时，Highcharts假定日期信息以毫秒Epoch格式表示。我收到的数据是第二种格式，所以我需要纠正一件事。
第二个问题是我的数据源忽略了日光节省（因此小时转移）。一旦我解释了这两个问题，我的图表轴就会像他们应该的那样最终出现。I'm getting started with the Highcharts JS library and I'm having some trouble with starting my chart at a specific date and time. The chart is a stream gage chart so my X values are a date/time (in EPOCH format) and the y values are a gage height.
I want my chart to cover 3 days starting at midnight, 2 days prior to today's date. I'm trying to use 'pointStart' to establish the beginning of my chart's x values but it's not quite working. I'm getting my three day timespan but the starting point isn't the desired midnight.
What am I doing wrong? Here's my full highcharts code:
$(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'
}
}
});
});
As it turns out, I had multiple things going on which prevented the chart from appearing the way I wanted. First, when you specify a dateTime type for an axis of your chart, Highcharts assumes that the date information is in millisecond Epoch format. The data I have was in second format so that was one thing I needed to correct.
The second issue was that my data's source ignores daylight savings (hence the hour shift). Once I accounted for these two issues, my chart's axis finally appeared as they should.
这篇关于开始时间系列Highcharts在特定日期/时间绘制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
