highcharts - 每次重绘时，Highstock 图形颜色都会发生变化

Question

我正在使用带有 ajax 调用的 highstock 来更新每次缩放的数据。在每次缩放期间，图表数据都会通过 API 调用进行更新。在每次重绘时，线条颜色都会随机更改。我怎样才能避免这种情况？

放大 1 放大 2

请注意，我使用的是 angularjs。

JS：

var afterSetExtremes = function(e) {
    if (!firstTimeLoad) {
        var fromDate = moment(Math.round(e.min)).format();
        var toDate = moment(Math.round(e.max)).format();
        var dataToSend = {
            graph: selectedChannels,
            fromDate: fromDate,
            toDate: toDate
        };
        //API call
        graphService.create({}, {}, dataToSend, {}).then(function(response) {
            if (response.status) {
                var hasData = false;
                response.data.records.map(function(op) {
                    if (op.data.length) {
                        hasData = true;
                    }
                });
                if (hasData) {
                    graphData = response.data;
                    // Updating chart series data
                    chartConfig.series = graphData.records;
                } else {
                    notify.error('No data found');
                }
            } else {
                notify.error('No data found');
            }
        }, function(reason) {
            notify.error('Application encountered some issues, please try again.');
        });
    }
    firstTimeLoad = false;

};

var chartConfig = {

    options: {
        chart: {
            renderTo: 'container',
            type: 'spline',
            zoomType: 'x'
        },
        legend: {
            enabled: true
        },
        xAxis: {
            events: {
                afterSetExtremes: afterSetExtremes
            }
        },
        yAxis: {
            floor: 0,
            labels: {
                format: '{value} ' + data.unit
            }
        },
        rangeSelector: {
            buttons: [{
                type: 'day',
                count: 1,
                text: '1d'
            }, {
                type: 'day',
                count: 7,
                text: '7d'
            }, {
                type: 'month',
                count: 1,
                text: '1m'
            }, {
                type: 'year',
                count: 1,
                text: '1y'
            }, {
                type: 'all',
                text: 'All'
            }],
            buttonTheme: {
                fill: 'none',
                stroke: 'none',
                'stroke-width': 0,
                r: 8,
                style: {
                    color: '#039',
                    fontWeight: 'bold'
                },
                states: {
                    hover: {},
                    select: {
                        fill: '#039',
                        style: {
                            color: 'white'
                        }
                    }
                }
            },
            // inputEnabled: true, // it supports only days
            selected: 4 // all
        },
        navigator: {
            enabled: true,
            adaptToUpdatedData: false,
            series: {
                includeInCSVExport: false
            }
        },
        plotOptions: {
            series: {
                animation: {
                    complete: function() {
                        $(window).resize(function() {
                            resizeToCover();
                        });
                        $(window).trigger('resize');
                        $('#chart1').css('display', 'block');

                    }
                }
            }
        },
        scrollbar: {
            liveRedraw: false
        }
    },
    series: graphData.records,
    title: {
        text: 'Graph'
    },
    loading: false,
    useHighStocks: true
};