javascript - 更新系列颜色似乎会破坏导航器和范围选择器

Question

我们希望允许用户将系列的颜色从单色渐变更改为发散色。我们通过下拉菜单执行此操作，我们捕获他们的选择并进行如下更新(比演示更简单的代码):

var rainbow = new Rainbow();
// Set start and end colors
rainbow.setSpectrum('#528bc2', 'white');
// Set the min/max range
var numSeries = chart.series.length;
var rangeLow = 0;
var rangeHigh = numSeries
rainbow.setNumberRange(rangeLow, rangeHigh);

// Loop over data and update the color value
for (index = 0; index < numSeries; ++index) {
    if (chart.series[index].name != 'Navigator') {
        if (chart.series[index].options.yAxis == 1) {
            chart.series[index].update({
                color: '#000080'
            }, false);
    } else {
        chart.series[index].update({
            color: '#' + rainbow.colourAt(index)
        }, false);
    }
    if (chart.series[index].visible) {
        var navigator = chart.get('nav');
        navigator.setData(chart.series[index].options.data);
    }
}

这确实会正确更新颜色，并且当用户想要改回原样时，我可以还原更改以使用数组中的另一个颜色列表。

图表已加载，因此一次只能看到一个系列，并且该系列用于导航器系列。当用户点击图例中的一个系列时，它会隐藏其他系列，使其不被绘制，只显示所选系列，更新导航器系列，并更新图表标题。当用户不更改颜色时，这很好用。

我面临的问题是，当用户在更改颜色时处于最初加载的系列以外的系列时，由于 图表，导航器系列将恢复为系列 [0] 数据集。正在调用 redraw()。调用更新代码后，如何让导航器系列干净利落地成为当前可见的系列？我尝试在颜色更新和 chart.events.load 之后放置这段代码(或类似的 block )，没有明显的影响:

for (i = 0; i < this.series.length; i += 1) {
    if (this.series[i].name != 'Navigator') {
        if (this.series[i].visible) {
        console.log(this.series[i].name);
        var navigator = this.get('nav');
        navigator.setData(this.series[i].options.data);
        }
    }
}

这是 jsFiddle 中要使用的一组实时数据. 要重现问题，请加载图表，然后单击图例中的“数据趋势 (%)”，使其在图表中可见。请注意，导航器系列已更改为该系列。现在，在下拉菜单中将所选值更改为“多色”。请注意系列的颜色是如何变化的，导航器系列数据也是如此。

Answer 1

Navigator 有两个引用系列的属性。第一个是它自己的系列对象——您更新它的数据属性，第二个是 baseSeries，它保持对图表中主要系列的引用。 http://jsfiddle.net/1jz3r78v/1/

如果将 baseSeries 设置为可见系列，它会按预期工作。

            serie[i].show();
            var navigator = this.chart.get('nav');
            this.chart.scroller.baseSeries = this; // serie[i]
            navigator.setData(serie[i].options.data);
            this.chart.setTitle({
              text: serie[i].name
            });

示例:https://jsfiddle.net/yct6y11m/1/