[英]How to align Highcharts datetime x-axis with data I pass to it?
这是jsfiddle
https://jsfiddle.net/Lp3tjpuv/
如果将光标移到图表的右上角,则会看到工具提示显示最后一条数据来自2015-09-06,但x轴标签显示的日期与实际数据不一致。
如何使x轴(其标签)与传递给它的实际数据对齐?
作为参考,我仅将日期为2015-09-03和2015-09-06的数据传递给该数据,因此该图表不应看起来像这样。 x轴使图表变形。
代码如下:
(function () {
Highcharts.setOptions({
lang: {
months: ['Leden', 'Únor', 'Březen', 'Duben', 'Květen', 'Červen', 'Červenec', 'Srpen', 'Září', 'Říjen', 'Listopad', 'Prosinec'],
weekdays: ['Neděle', 'Pondělí', 'Úterý', 'Středa', 'Čtvrtek', 'Pátek', 'Sobota']
}
});
window.ChartData = JSON.parse('{"collected":[{"created":"1441287599000","amount":"1"},{"created":"1441373999000","amount":"1"},{"created":"1441463999000","amount":"1"},{"created":"1441546799000","amount":"5"}],"challenges":[{"created":"1441287599000","amount":"1"},{"created":"1441291199000","amount":"2"},{"created":"1441291799000","amount":"3"},{"created":"1441553999000","amount":"4"},{"created":"1441561199000","amount":"5"},{"created":"1441568399000","amount":"6"}],"participants":[{"created":"2015-09-03 15:39:59","amount":"1"},{"created":"2015-09-03 16:39:59","amount":"2"},{"created":"2015-09-03 16:49:59","amount":"2"},{"created":"2015-09-06 17:39:59","amount":"3"},{"created":"2015-09-06 19:39:59","amount":"8"},{"created":"2015-09-06 21:39:59","amount":"18"}],"initialUnixMilliseconds":1441287599000,"pointsInterval":86400000}');
$(function () {
$('#container').highcharts({
chart: {
type: 'area',
marginTop: 100
},
credits: false,
title: {
text: ''
},
subtitle: {
text: '' //can be html
},
xAxis: {
type: 'datetime',
labels: {
formatter: function () {
return moment(this.value).format('D. M.');
}
}
},
yAxis: {
title: {
text: ''
},
labels: {
formatter: function () {
return this.value;
}
}
},
legend: {
symbolRadius: 130,
symbolWidth: 10,
symbolHeight: 10,
align: 'center',
verticalAlign: 'top',
floating: true,
x: 0,
y: 0
},
tooltip: {
pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
},
plotOptions: {
area: {
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [
//{
// name: 'test',
// color: '#499814',
// data: [
// [Date.UTC(2015, 9, 21), 1],
// [Date.UTC(2015, 9, 22), 1],
// [Date.UTC(2015, 9, 23), 1],
// [Date.UTC(2015, 9, 24), 1],
// [Date.UTC(2015, 9, 25), 5]
// ],
// pointStart: Date.UTC(2015, 9, 21),
// pointInterval: ChartData.pointsInterval
//},
//{
// name: 'počet výzev',
// color: '#499814',
// data: processData(ChartData.challenges),
// pointStart: ChartData.initialUnixMilliseconds,
// pointInterval: ChartData.pointsInterval
//},
{
name: 'počet účastníků',
color: '#F4E134',
data: processData(ChartData.participants),
pointStart: ChartData.initialUnixMilliseconds,
pointInterval: ChartData.pointsInterval
},
// {
// name: 'počet odeslaných DMS',
// color: '#D34F6A',
// data: shuffle(range(240)),
// pointStart: ChartData.initialUnixMilliseconds,
// pointInterval: ChartData.pointsInterval
//},
//{
// name: 'vybraných prostředků',
// color: '#66ADFF',
// data: processData(ChartData.collected),
// pointStart: ChartData.initialUnixMilliseconds,
// pointInterval: ChartData.pointsInterval
//}
]
});
});
function processData(data) {
var result = [];
$.map(data, function (obj) {
result.push([obj.created, Number(obj.amount)]);
});
console.log(result);
return result;
}
function range(n) {
return Array.apply(null, Array(n)).map(function (_, i) {
return i;
})
}
function shuffle(array) {
var counter = array.length, temp, index;
// While there are elements in the array
while (counter > 0) {
// Pick a random index
index = Math.floor(Math.random() * counter);
// Decrease counter by 1
counter--;
// And swap the last element with it
temp = array[counter];
array[counter] = array[index];
array[index] = temp;
}
return array;
}
}());
//$.each(ChartData.challenges, function (i, v) {
// console.log(new Date(Number(v.created)));
//});
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
我在https://jsfiddle.net/Nishith/Lp3tjpuv/1/中更新了您的提琴
labels: {
formatter: function () {
return moment(this.value).format('D. M.');
}
}
为此,请使用Axis.tickPositioner
,例如:
tickPositioner: function(min, max) {
return this.series[0].xData.slice();
},
和演示: https : //jsfiddle.net/Lp3tjpuv/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.