Highstock 在系列中不存在日期时比较先前的数据点
Highstock compare previous data point when date does not exist in series
我使用 highstock 在折线图中显示基金数据,我使用的数据系列缺少日期(主要是周末)。我无法控制数据系列的源代码,尽管我已经通过在 JS 中循环遍历它来格式化它,以便它可以与 Highstock 一起使用。当我在缺失日期上使用 rangeSelector 时会出现问题,当我在范围选择器中选择 From 到周末日期(数据系列中缺失的日期)时,比较百分比开始计算从下一个可用数据点。
例子
- 转到此演示:http://www.highcharts.com/stock/demo/compare
- 选择 2014 年 12 月 14 日作为开始 日期。
从2014-12-15开始计算为0值,也就是星期一。我希望它始终从前一个数据点开始比较百分比,而不是下一个。我希望它从 2014-12-12 开始,也就是星期五。
我如何在 JS 中启动 highstocks:
var opts = {
chart : {
backgroundColor: '#f9f9fa',
borderWidth: 0,
type: 'line'
},
rangeSelector : {
buttons: [{
type: 'month',
count: 3,
text: '3m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'ytd',
text: 'YTD'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected : 3,
inputEnabled: false
},
plotOptions: {
series: {
compare: 'percent'
}
},
title : {
text : ''
},
navigator : {
enabled : false
},
credits: {
enabled: false
},
series : [{
name : '',
data : seriesData,
lineColor : '#002855',
tooltip: {
valueDecimals: 4
},
turboThreshold : 0
}],
xAxis : {
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%e %b.',
week: '%b %y',
month: '%b %y',
year: '%Y'
},
ordinal: false,
minTickInterval : 4 * 7 * 24 * 3600 * 1000
},
yAxis : {
labels: {
format: '{value} %'
}
},
tooltip : {
valueSuffix : '',
pointFormat : '<span style="color:{point.color}">\u25CF</span> {point.y} SEK ({point.change}%)<br/>'
}
};
$(el).highcharts('StockChart', opts);
我的 seriesData 变量在我格式化后看起来像这样:
[
{ name="2005-01-03", x=1104710400000, y=100 },
{ name="2005-01-04", x=1104796800000, y=99.9983 },
{ name="2005-01-05", x=1104883200000, y=99.9175014 },
{ name="2005-01-07", x=1105056000000, y=100.0739722 },
// This continues to the current date
]
x 是时间戳。
y 是股票价值
name 是一个字符串,表示 x
中的时间戳
el是前面定义的,是元素节点对象
当数据系列中的日期不存在时,是否可以从前一个可用数据点开始比较而不是下一个?
任何有关此问题的帮助将不胜感激!
编辑:在下面添加了我的解决方案作为答案
我发现 afterSetExtremes 对修改最小值和最大值非常有用,我检查日期是星期六还是星期日。如果是星期六,我将时间倒退-1 天,如果是星期天,我将时间倒退-2 天。这应该涵盖我所有正常的周末,而且效果很好。虽然它不会涵盖工作日发生的假期。我也没有修改最大时间,尽管我可能需要这样做。
我当前的 xAxis:
xAxis : {
events: {
afterSetExtremes: function(e){
var maxTimestamp = this.max,
minTimestamp = this.min;
var dateMin = new Date( minTimestamp ),
dateMax = new Date( maxTimestamp ),
minDayOfTheWeek = dateMin.getDay();
// Test to see if its saturday or sunday
if( minDayOfTheWeek === 6 || minDayOfTheWeek === 0 ){
if( minDayOfTheWeek === 6 ){
dateMin.setDate( dateMin.getDate() - 1 );
}else if( minDayOfTheWeek === 0 ){
dateMin.setDate( dateMin.getDate() - 2 );
}
this.setExtremes( dateMin.getTime(), dateMax.getTime() );
}
}
},
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%e %b.',
week: '%b %y',
month: '%b %y',
year: '%Y'
},
ordinal: false,
minTickInterval : 4 * 7 * 24 * 3600 * 1000
}
并将此添加到 图表 因为 afterSetExtremes 不要 运行 为我加载:
chart : {
backgroundColor: '#f9f9fa',
borderWidth: 0,
events:{
load: function(){
var max = this.xAxis[0].max,
min = this.xAxis[0].min;
this.xAxis[0].setExtremes( min, max );
}
},
type: 'line'
}
我使用 highstock 在折线图中显示基金数据,我使用的数据系列缺少日期(主要是周末)。我无法控制数据系列的源代码,尽管我已经通过在 JS 中循环遍历它来格式化它,以便它可以与 Highstock 一起使用。当我在缺失日期上使用 rangeSelector 时会出现问题,当我在范围选择器中选择 From 到周末日期(数据系列中缺失的日期)时,比较百分比开始计算从下一个可用数据点。
例子
- 转到此演示:http://www.highcharts.com/stock/demo/compare
- 选择 2014 年 12 月 14 日作为开始 日期。
从2014-12-15开始计算为0值,也就是星期一。我希望它始终从前一个数据点开始比较百分比,而不是下一个。我希望它从 2014-12-12 开始,也就是星期五。
我如何在 JS 中启动 highstocks:
var opts = {
chart : {
backgroundColor: '#f9f9fa',
borderWidth: 0,
type: 'line'
},
rangeSelector : {
buttons: [{
type: 'month',
count: 3,
text: '3m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'ytd',
text: 'YTD'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected : 3,
inputEnabled: false
},
plotOptions: {
series: {
compare: 'percent'
}
},
title : {
text : ''
},
navigator : {
enabled : false
},
credits: {
enabled: false
},
series : [{
name : '',
data : seriesData,
lineColor : '#002855',
tooltip: {
valueDecimals: 4
},
turboThreshold : 0
}],
xAxis : {
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%e %b.',
week: '%b %y',
month: '%b %y',
year: '%Y'
},
ordinal: false,
minTickInterval : 4 * 7 * 24 * 3600 * 1000
},
yAxis : {
labels: {
format: '{value} %'
}
},
tooltip : {
valueSuffix : '',
pointFormat : '<span style="color:{point.color}">\u25CF</span> {point.y} SEK ({point.change}%)<br/>'
}
};
$(el).highcharts('StockChart', opts);
我的 seriesData 变量在我格式化后看起来像这样:
[
{ name="2005-01-03", x=1104710400000, y=100 },
{ name="2005-01-04", x=1104796800000, y=99.9983 },
{ name="2005-01-05", x=1104883200000, y=99.9175014 },
{ name="2005-01-07", x=1105056000000, y=100.0739722 },
// This continues to the current date
]
x 是时间戳。
y 是股票价值
name 是一个字符串,表示 x
el是前面定义的,是元素节点对象
当数据系列中的日期不存在时,是否可以从前一个可用数据点开始比较而不是下一个?
任何有关此问题的帮助将不胜感激!
编辑:在下面添加了我的解决方案作为答案
我发现 afterSetExtremes 对修改最小值和最大值非常有用,我检查日期是星期六还是星期日。如果是星期六,我将时间倒退-1 天,如果是星期天,我将时间倒退-2 天。这应该涵盖我所有正常的周末,而且效果很好。虽然它不会涵盖工作日发生的假期。我也没有修改最大时间,尽管我可能需要这样做。
我当前的 xAxis:
xAxis : {
events: {
afterSetExtremes: function(e){
var maxTimestamp = this.max,
minTimestamp = this.min;
var dateMin = new Date( minTimestamp ),
dateMax = new Date( maxTimestamp ),
minDayOfTheWeek = dateMin.getDay();
// Test to see if its saturday or sunday
if( minDayOfTheWeek === 6 || minDayOfTheWeek === 0 ){
if( minDayOfTheWeek === 6 ){
dateMin.setDate( dateMin.getDate() - 1 );
}else if( minDayOfTheWeek === 0 ){
dateMin.setDate( dateMin.getDate() - 2 );
}
this.setExtremes( dateMin.getTime(), dateMax.getTime() );
}
}
},
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%e %b.',
week: '%b %y',
month: '%b %y',
year: '%Y'
},
ordinal: false,
minTickInterval : 4 * 7 * 24 * 3600 * 1000
}
并将此添加到 图表 因为 afterSetExtremes 不要 运行 为我加载:
chart : {
backgroundColor: '#f9f9fa',
borderWidth: 0,
events:{
load: function(){
var max = this.xAxis[0].max,
min = this.xAxis[0].min;
this.xAxis[0].setExtremes( min, max );
}
},
type: 'line'
}