我有一个无法理解 highcharts 行为的案例。
在绘制原始数据系列时，我得到一个带有奇怪 x 轴（错误的开始/结束刻度）和缩放行为的图表。如果我完成该系列，以便每个数据点都存在于两个系列中（即将第一个系列的日期添加到具有 0 值的第二个系列），一切都会恢复正常。
如果您查看此示例 jsFiddle，则开始日期为 12 月 2 日。2012 年午夜，结束日期为 1 月 31 日。然而，在 2013 年午夜，上图显示了一个在 2 月结束的 x 轴。如果您尝试缩放，刻度文本会出现乱码。在底部图表上，绘制了相同的数据，但这次使用“数据填充”，x 轴很好，缩放按预期工作。
所以我的问题是，有谁知道问题是什么，数据需要填充吗？
代码：
$(function () {
var chart1, chart2;
$(document).ready(function () {
var opts = {
chart: {
"alignTicks": true,
"animation": true,
"backgroundColor": "#FFFFFF",
"borderColor": "#4572A7",
"borderRadius": 5,
"borderWidth": 0,
"ignoreHiddenSeries": true,
"inverted": false,
"plotBorderColor": "#C0C0C0",
"plotBorderWidth": 0,
"plotShadow": false,
"reflow": true,
"resetZoomButton": {
"position": {
"verticalAlign": "bottom",
"y": 30.0
},
"relativeTo": "plot"
},
"selectionMarkerFill": "rgba(69,114,167,0.25)",
"shadow": false,
"showAxes": false,
"spacingBottom": 15,
"spacingLeft": 10,
"spacingRight": 10,
"spacingTop": 10,
"type": "column",
"zoomType": "x"
},
credits: {
"enabled": false
},
legend: {
"align": "center",
"borderColor": "#909090",
"borderRadius": 5,
"borderWidth": 1,
"enabled": true,
"floating": false,
"itemMarginBottom": 0,
"itemMarginTop": 0,
"layout": "horizontal",
"lineHeight": 16,
"margin": 15,
"padding": 8,
"reversed": false,
"rtl": false,
"shadow": false,
"symbolPadding": 5,
"symbolWidth": 30,
"useHtml": false,
"verticalAlign": "bottom",
"x": 0,
"y": 0
},
plotOptions: {
"column": {
"allowPointSelect": false,
"animation": true,
"colorByPoint": false,
"enableMouseTracking": true,
"grouping": true,
"selected": false,
"shadow": true,
"showCheckbox": false,
"showInLegend": true,
"stacking": "normal",
"stickyTracking": true,
"visible": true
}
},
title: {
"align": "center",
"floating": false,
"useHTML": false,
"verticalAlign": "top",
"x": 0.0,
"y": 15.0
},
xAxis: {
"type": "datetime"
},
yAxis: {
"title": {
"text": "Number"
}
},
tooltip: {
"animation": true,
"enabled": true,
"shadow": true,
"shared": false,
"useHTML": false,
"xDateFormat": "%d/%m/%Y"
}
};
chart1 = new Highcharts.Chart($.extend(true, {
chart: {
"renderTo": "aU8Q_4"
},
title: { text: 'bad' },
series: [{
"data": [
[
1354489199000,
0],
[
1357686000000,
1],
[
1357858800000,
1],
[
1358118000000,
1],
[
1359673199000,
0]
],
"name": "Emit."
}, {
"data": [
[
1354489199000,
0],
[
1357686000000,
1],
[
1359673199000,
0]
],
"name": "Recpt."
}]
}, opts));
chart2 = new Highcharts.Chart($.extend(true, opts, {
chart: {
"renderTo": "aU8Q_5"
},
title: { text: 'good' },
series: [{
"data": [
[
1354489199000,
0],
[
1357686000000,
1],
[
1357858800000,
1],
[
1358118000000,
1],
[
1359673199000,
0]
],
"name": "Emit."
}, {
"data": [
[
1354489199000,
0],
[
1357686000000,
1],
[
1357858800000,
0],
[
1358118000000,
0],
[
1359673199000,
0]
],
"name": "Recpt."
}]
}, opts));
});
});