开始时间系列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屋!