Highcharts rangeSelector ytd

Question

我有一个高档图表，导航器与4个高图图表同步。我想最初在所有5个图表上显示YTD，但以下给出了xaxis错误。看起来需要在渲染所有图表后设置它。我试过好几个地方都没有用。

rangeSelector: {
    selected: 3
},

有什么建议吗？

如果不是太麻烦，这里是the site I'm working on。 5个图表的代码太长，无法在此处显示。点击任何图标。

Answer 1

问题是设置rangeSelector.selected: 3会触发您的xAxis.events.setExtremes函数，该函数会引用尚未初始化的其他图表，并导致错误。

要解决此问题，您只需将chart1构造函数移动到最后，然后再执行其他图表。

简而言之：

$('#container2').highcharts({
    // ...
});
$('#container3').highcharts({
    // ...
});
$('#container4').highcharts({
    // ...
});
$('#container5').highcharts({
    // ...
});
$('#container1').highcharts('StockChart', {
    rangeSelector: {
        selected: 3
    },
    xAxis: {
        events: {
            setExtremes: function (e) {
                var thisMin = e.min,
                    thisMax = e.max,
                    chart2 = $('#container2').highcharts();
                chart3 = $('#container3').highcharts();
                chart4 = $('#container4').highcharts();
                chart5 = $('#container5').highcharts();

                chart2.xAxis[0].setExtremes(thisMin, thisMax);
                chart3.xAxis[0].setExtremes(thisMin, thisMax);
                chart4.xAxis[0].setExtremes(thisMin, thisMax);
                chart5.xAxis[0].setExtremes(thisMin, thisMax);
            }
        }
    },
    // ...
});