ズームを介してリンクされた 4 つのグラフを作成しています。x軸は同じであるはずですが、何らかの理由でズームすると目盛りの間隔が正しくありません...また、赤い線は4つのグラフ間で正確に整列する必要がありますが、それができない理由だと思いますラインアップは、すべてのグラフの x 軸の目盛りによるものです...これを修正する方法についてのアイデアはありますか? 最後に JSFiddle 。
xAxis でこのタイプのイベントを使用して、すべてのグラフをズームします。
events: {
afterSetExtremes: function() {
if (!this.chart.options.chart.isZoomed)
{
var xMin = this.chart.xAxis[0].min;
var xMax = this.chart.xAxis[0].max;
var zmRange = computeTickInterval(xMin, xMax);
chart1.xAxis[0].options.tickInterval =zmRange;
chart1.xAxis[0].isDirty = true;
chart2.xAxis[0].options.tickInterval = zmRange;
chart2.xAxis[0].isDirty = true;
chart3.xAxis[0].options.tickInterval = zmRange;
chart3.xAxis[0].isDirty = true;
chart4.xAxis[0].options.tickInterval = zmRange;
chart4.xAxis[0].isDirty = true;
chart1.options.chart.isZoomed = true;
chart3.options.chart.isZoomed = true;
chart4.options.chart.isZoomed = true;
chart1.xAxis[0].setExtremes(xMin, xMax, true);
chart4.xAxis[0].setExtremes(xMin, xMax, true)
chart3.xAxis[0].setExtremes(xMin, xMax, true);
chart1.options.chart.isZoomed = false;
chart4.options.chart.isZoomed = false;
chart3.options.chart.isZoomed = false;
}
}
}
},
グラフは次のとおりです。
ありがとう!