Highcharts / Highstock:x 轴日期显示为三个点
Highcharts / Highstock: x-axis dates appear as three dots
我这里有一张 Highstock 股票图表:
http://www.intesasanpaololife.ie/it/prodotti/prospettiva-20/fondi/profilo-base
(它位于页面顶部)。
如果我 select 一小段时间(select 2015 年 4 月 1 日作为开始日期,使用日期选择器),x 轴上的日期显示为三个点,而不是正确的日期。如果我使用底部的滚动条滚动,则会出现正确的日期。
我们使用自定义函数 select 日期落在轴上的位置。
这三个点在我看来是一个函数的效果,如果没有足够的 space,它会将标签更改为点,但事实并非如此。
启动图表的函数位于此文件中:
http://www.intesasanpaololife.ie/jscript/fund.js,从第27行开始:
$.getJSON($('#fund-trend').data('source'), function (data) {
var tickerPositions = function(series){
var positions = [];
for(var i=0; i<series.length; i++){
positions.push(series[i][0]);
}
return positions;
}
var tP = tickerPositions(data.series[0].data);
// console.log(tP);
$('#fund-trend').highcharts('StockChart',{
chart: {
backgroundColor:'#e1ebf5',
plotBorderWidth: null,
plotShadow: false,
events: {
load: function(chart) {
// apply the date pickers
setTimeout(function() {
$('input.highcharts-range-selector', $('#fund-trend')).datepicker(
// $.datepicker.regional[ "it" ]
{
beforeShowDay: function(date){
if(date.getDay() == 3){
return [true];
} else {
return [false];
}
}
}
);
}, 0);
}
}
},
colors: [
'#1c578f', '#99b3cc'
],
title : {
text : ''
},
credits: {
enabled: false
},
tooltip: {
valueSuffix: ' €',
valueDecimals: 2,
dateTimeLabelFormats:{
millisecond:"%A, %b %e, %H:%M:%S.%L",
second:"%A, %b %e, %H:%M:%S",
minute:"%A, %b %e, %H:%M",
hour:"%A, %b %e, %H:%M",
day:"%d/%m/%Y",
week:"Settimana del %d/%m/%Y",
month:"%B %Y",
year:"%Y"
}
},
plotOptions: {
series: {
dataGrouping: {
dateTimeLabelFormats: {
millisecond: ['%A, %b %e, %H:%M:%S.%L', '%A, %b %e, %H:%M:%S.%L', '-%H:%M:%S.%L'],
second: ['%A, %b %e, %H:%M:%S', '%A, %b %e, %H:%M:%S', '-%H:%M:%S'],
minute: ['%A, %b %e, %H:%M', '%A, %b %e, %H:%M', '-%H:%M'],
hour: ['%A, %b %e, %H:%M', '%A, %b %e, %H:%M', '-%H:%M'],
day: ['%A, %b %e, %Y', '%A, %b %e', '-%A, %b %e, %Y'],
week: ['Settimana del %d/%m/%Y', 'dal %d/%m/%Y', 'al %d/%m/%Y'],
month: ['%B %Y', '%B', '-%B %Y'],
year: ['%Y', '%Y', '-%Y']
}
}
}
},
rangeSelector: {
enabled: true,
buttons: [],
//inputDateFormat: "%d %b %Y",
inputDateFormat: '%d/%m/%Y',
inputEditDateFormat: "%d/%m/%Y",
inputDateParser: function(value){
value = value.split("/");
var date = Date.UTC(
parseInt((value[2])),
parseInt((value[1]-1)),
parseInt(value[0])
);
return (date);
}
},
xAxis: {
tickInterval: 7 * 24 * 36e5,
labels: {
format: '{value:%d-%m-%Y}'
},
startOfWeek: 3,
// tickPositions: tP,
tickPositioner: function(min, max){
// console.log("positioning" + min + " " + max + " " + (max-min));
var selectCurrentPositions = function(min, max){
var positions = [];
var weeks = (max-min ) / (7 * 24 * 36e5);
var interval = Math.ceil(weeks/15);
//console.log ("weeks " + weeks + " interval " + interval);
var count = 0;
for(var i=tP.length-1; i>0; i--){
// console.log(tP[i]);
// console.log(count + " interval " + interval + " tp[i] " + tP[i] );
if(tP[i]>= min || tP[i] <= max) {
if(count%interval == 0 ) {
// console.log("pushing it i is "+ i);
positions.push(tP[i]);
}
}
count++;
}
// console.log(positions);
return positions;
}
return selectCurrentPositions(min,max);
},
endOnTick: false
},
navigator: {
enabled: false
},
series : data.series
});
});
有什么想法吗?有帮助吗?
问题仍然出在您的 tickPositioner
上。在这一行中:if(tP[i]>= min || tP[i] <= max)
.
应该有:if(tP[i]>= min && tP[i] <= max)
。我想你想要在范围内。
我这里有一张 Highstock 股票图表: http://www.intesasanpaololife.ie/it/prodotti/prospettiva-20/fondi/profilo-base (它位于页面顶部)。 如果我 select 一小段时间(select 2015 年 4 月 1 日作为开始日期,使用日期选择器),x 轴上的日期显示为三个点,而不是正确的日期。如果我使用底部的滚动条滚动,则会出现正确的日期。 我们使用自定义函数 select 日期落在轴上的位置。 这三个点在我看来是一个函数的效果,如果没有足够的 space,它会将标签更改为点,但事实并非如此。 启动图表的函数位于此文件中: http://www.intesasanpaololife.ie/jscript/fund.js,从第27行开始:
$.getJSON($('#fund-trend').data('source'), function (data) {
var tickerPositions = function(series){
var positions = [];
for(var i=0; i<series.length; i++){
positions.push(series[i][0]);
}
return positions;
}
var tP = tickerPositions(data.series[0].data);
// console.log(tP);
$('#fund-trend').highcharts('StockChart',{
chart: {
backgroundColor:'#e1ebf5',
plotBorderWidth: null,
plotShadow: false,
events: {
load: function(chart) {
// apply the date pickers
setTimeout(function() {
$('input.highcharts-range-selector', $('#fund-trend')).datepicker(
// $.datepicker.regional[ "it" ]
{
beforeShowDay: function(date){
if(date.getDay() == 3){
return [true];
} else {
return [false];
}
}
}
);
}, 0);
}
}
},
colors: [
'#1c578f', '#99b3cc'
],
title : {
text : ''
},
credits: {
enabled: false
},
tooltip: {
valueSuffix: ' €',
valueDecimals: 2,
dateTimeLabelFormats:{
millisecond:"%A, %b %e, %H:%M:%S.%L",
second:"%A, %b %e, %H:%M:%S",
minute:"%A, %b %e, %H:%M",
hour:"%A, %b %e, %H:%M",
day:"%d/%m/%Y",
week:"Settimana del %d/%m/%Y",
month:"%B %Y",
year:"%Y"
}
},
plotOptions: {
series: {
dataGrouping: {
dateTimeLabelFormats: {
millisecond: ['%A, %b %e, %H:%M:%S.%L', '%A, %b %e, %H:%M:%S.%L', '-%H:%M:%S.%L'],
second: ['%A, %b %e, %H:%M:%S', '%A, %b %e, %H:%M:%S', '-%H:%M:%S'],
minute: ['%A, %b %e, %H:%M', '%A, %b %e, %H:%M', '-%H:%M'],
hour: ['%A, %b %e, %H:%M', '%A, %b %e, %H:%M', '-%H:%M'],
day: ['%A, %b %e, %Y', '%A, %b %e', '-%A, %b %e, %Y'],
week: ['Settimana del %d/%m/%Y', 'dal %d/%m/%Y', 'al %d/%m/%Y'],
month: ['%B %Y', '%B', '-%B %Y'],
year: ['%Y', '%Y', '-%Y']
}
}
}
},
rangeSelector: {
enabled: true,
buttons: [],
//inputDateFormat: "%d %b %Y",
inputDateFormat: '%d/%m/%Y',
inputEditDateFormat: "%d/%m/%Y",
inputDateParser: function(value){
value = value.split("/");
var date = Date.UTC(
parseInt((value[2])),
parseInt((value[1]-1)),
parseInt(value[0])
);
return (date);
}
},
xAxis: {
tickInterval: 7 * 24 * 36e5,
labels: {
format: '{value:%d-%m-%Y}'
},
startOfWeek: 3,
// tickPositions: tP,
tickPositioner: function(min, max){
// console.log("positioning" + min + " " + max + " " + (max-min));
var selectCurrentPositions = function(min, max){
var positions = [];
var weeks = (max-min ) / (7 * 24 * 36e5);
var interval = Math.ceil(weeks/15);
//console.log ("weeks " + weeks + " interval " + interval);
var count = 0;
for(var i=tP.length-1; i>0; i--){
// console.log(tP[i]);
// console.log(count + " interval " + interval + " tp[i] " + tP[i] );
if(tP[i]>= min || tP[i] <= max) {
if(count%interval == 0 ) {
// console.log("pushing it i is "+ i);
positions.push(tP[i]);
}
}
count++;
}
// console.log(positions);
return positions;
}
return selectCurrentPositions(min,max);
},
endOnTick: false
},
navigator: {
enabled: false
},
series : data.series
});
});
有什么想法吗?有帮助吗?
问题仍然出在您的 tickPositioner
上。在这一行中:if(tP[i]>= min || tP[i] <= max)
.
应该有:if(tP[i]>= min && tP[i] <= max)
。我想你想要在范围内。