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);
    }
}

这确实可以正确更新颜色，我可以还原更改，以便在用户想要更改时使用数组中的另一个颜色列表。

加载图表，以便一次只能看到一个系列，并在导航器系列中使用该系列。当用户单击图例中的某个系列时，它会隐藏其他系列，不会显示所选系列，更新导航器系列，并更新图表标题。当用户不改变颜色时，这很好用。

我面临的问题是当用户在更改颜色时处于最初加载的系列之外的系列时，导航器系列会因chart.redraw()而恢复为系列[0]数据集被召唤。在调用更新代码后，如何干净地将导航器系列变为当前可见的系列？我尝试在颜色更新和chart.events.load之后放置此代码（或类似的块），但没有明显的影响：

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中要处理的实时数据集。要重现问题，请加载图表，然后点击数据趋势（％）＆＃39;在图例中，以便在图表中可见。请注意，导航器系列已更改为此系列。现在，在下拉菜单中将所选值更改为＆＃34;多色＆＃34;。注意系列如何＆＃39;颜色已经改变，但导航系列数据也是如此。

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/

更新系列颜色似乎打破导航器和范围选择器

1 个答案: