ハイチャートの動作を理解できない場合があります。
生の一連のデータをプロットすると、奇妙な x 軸 (間違った開始/終了の目盛り) とズーム動作を含むグラフが表示されます。各データ ポイントが両方のシリーズに存在するようにシリーズを完成させると (つまり、最初のシリーズの日付を 0 の値を持つ 2 番目のシリーズに追加する)、すべてが正常に戻ります。
このサンプル jsFiddleを見ると、開始日は 12 月 2 日です。2012 年の午前 0 時で、終了日は 1 月 31 日です。2013 年の真夜中ですが、上のグラフは x 軸が 2 月で終わることを示しています。ズームしようとすると、目盛りのテキストが文字化けします。下のグラフでは、同じデータがプロットされていますが、今回は「データ パディング」を使用しており、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));
});
});