价格线在HighChart中消失

我正在使用HighCharts和Angular highcharts-ng指令。而且，我采取的大多数措施很可能会导致价格线消失，甚至实际上不会显示。

• 调整浏览器窗口的大小，从而调整图表的大小（线条消失90％）
• 更改时间跨度（线消失大约20％的时间）
• 更改价格线数据（线消失约10％的时间）
• 在图表中添加或删除面积图
• 没有错误

^以上％是基于感觉:(

^还请注意，焦点时间线导航器内部的折线图也消失了。同样，如果将鼠标悬停在图表上，则会显示缺失线的点。

以下是图表的外观（但是焦点线也位于下方）：

我使用的图表是一种多图表，其中我有1条线图（股价）和最多3张面积图绘制其他数据。我也使用highstocks 4.2.0。我们的应用程序非常复杂，很难在plunkr中复制。

这是我的chartConfig

generateChartObject();

function generateChartObject() {
    // Create the chart
    vs.chartConfig = {
        options: {
            ignoreHiddenSeries: false,
            credits: { enabled: true, text: 'tickertags' },
            legend: {
                itemStyle: {
                    color: "#333333",
                    cursor: "pointer",
                    fontSize: "10px",
                    fontWeight: "normal"
                },
                enabled: true,
                floating: true,
                align: 'left',
                verticalAlign: 'top',
                x: 60
            },
            chart : {
                title: { text: '' },
                subtitle: { text: '' },
                renderTo: 'chart1',
                zoomType: 'x',
                events: {
                    load: function () {
                        broadcastChartloaded();
                        vs.chartObject.hideLoading();
                    }
                }
            },
            scrollbar: {
                enabled: false,
                liveRedraw: false
            },
            navigator : {
                enabled: true,
                adaptToUpdatedData: true,
                series : {
                    // data : quote_data
                }
            },
            rangeSelector: {
                enabled: false,
            },
            tooltip: {
                pointFormatter: tooltipFormatter,
                shared: true
            },
            exporting: { enabled: false },
            plotOptions: {
                series: {
                    point: {
                        events: {
                            click: afterClick,
                        }
                    }
                },
                area: {
                    stacking: 'normal',
                },
                column: {
                    stacking: 'normal',
                }
            }
        },
        exporting: { enabled: false },
        useHighStocks: true,
        xAxis : {
            dateTimeLabelFormats : {
                hour: '%I %p',
                minute: '%I:%M %p'
            },
            events : {
                afterSetExtremes : afterSetExtremes,
                setExtremes : setExtremes
            },
            minRange: 3600 * 1000 // one hour
        },
        yAxis: [{ // Primary yAxis
            labels: {
                format: '${value:.2f}',
                style: {
                    color: '#4C73FF',
                }
            },
            title: {
                text: 'Price',
                style: {
                    color: '#4C73FF',
                }
            }
        },
        { // Secondary yAxis
            gridLineWidth: 0,
            title: {
                text: 'Mentions',
                style: {
                    color: '#FDE18D'
                }
            },
            labels: {
                formatter: volumeFormatter,
                style: {
                    color: '#FDE18D'
                }
            },
            opposite: false
        }],
        func: function(chart) {
            vs.chartObject = chart;
        }
    };
}

我的图表的生成方式：

步骤1绘制价格线

在我的tickersController中，我广播了哪个代码来绘制一条线到chartController：

$scope.$emit("display.chart", vm.ticker.ticker);

我的highChartsController接收事件并开始工作：

$scope.$on("display.chart", function(event, ticker) {
    displayChart(ticker)
        .then(function (data) {
            // console.log('"displayChart TICKER data returned"',data);
            vs.chartObject.addSeries({
                zIndex: 1000,
                showInLegend: true,
                yAxis: 0,
                type: 'line',
                name: ticker,
                color: '#4C73FF',
                data: data,
                dataGrouping: {
                    enabled: true
                }
            }, true);

            checkForTags();

        }).catch(function(error) {
            console.error('error', error);
        });
    }
);

这是带有一个正在等待API GET的Promise的displayChart函数（promise将返回quote_data中的数据）：

function displayChart(ticker) {
    console.log('displayChart()');

    var deferred = $q.defer(),
        promise;

    if (ticker === undefined) ticker = 'SPY';

    vs.ticker  = ticker; // Bugged, sometimes ticker is an Object
    vs._ticker = ticker; // Quick fix
    symbolUrls = {};

    var url = '/app/api/tickers/quotes/'+ticker;
    symbolUrls[ticker] = url;

    promise = ApiFactory.quotes(buildFullUrl('quotes', url)).then(function (data) {
        var quote_data = formatQuotes(data, 'quotes');

        // Remove any old chart series:
        if (!_.isEmpty(vs.chartObject)) {
            while(vs.chartObject.series.length > 0)
                vs.chartObject.series[0].remove(true);
        }

        deferred.resolve(quote_data);
    });

    return deferred.promise;
}

现在回到我的eventListener $scope.$on("display.chart", function(event, ticker) {

在displayChart返回Promise和数据后，我添加了序列，然后调用checkForTags()：

displayChart(ticker)
    .then(function (data) {
        // console.log('"displayChart TICKER data returned"',data);
        vs.chartObject.addSeries({
            zIndex: 1000,
            showInLegend: true,
            yAxis: 0,
            type: 'line',
            name: ticker,
            color: '#4C73FF',
            data: data,
            dataGrouping: {
                enabled: true
            }
        }, true);

        checkForTags();

步骤2，获取并绘制面积图：

function checkForTags() {
    var tags = TagFactory.retrieveTickerTags('all');
    // Up to 3 tags in the tags Array (The Area graphs):
    if (tags.length) {
        getTickerTags(tags);
    }
}

function getTickerTags(tags) {
    prepareTags(tags).then(function(data) {
        // Once data comes back from prepareTags, the loop below,
        // generates up to 3 tag Area Graphs in the chart:
        for (var i = data.length - 1; i >= 0; i--) {
            vs.chartObject.addSeries({
                showInLegend: true,
                zIndex: 900,
                yAxis: 1,
                type: 'area',
                // name: term,
                color: lookupColors[i],
                data: data[i],
                dataGrouping: {
                    enabled: false
                }
            }, true);

            if (i === 0) {
                handleRedraw(); // function below
            }
        }

    })
    .catch(function(error) {
        console.error('error', error);
    });
}

function prepareTags(tags) {
    var deferred        = $q.defer();
    var tagsComplete    = 0;
    var allTags         = [];

    // Request ALL Tag series quote data:
    for (var i=0; i<tags.length; i++) {
        var url = '/app/api/twitter/' + tags[i].term_id;

        getTagData(url, tags[i].term, term_positions[tags[i].term_id]).then(function(data) {
            // Push tag data into allTags Array:
            allTags.push( data );
            tagsComplete++;

            // When loop is complete, resolve all the Promises:
            if (tagsComplete === tags.length) {
                deferred.resolve(allTags);
            }
        });
    }

    return deferred.promise;
}

function getTagData(url, term, i) {
    var e = vs.chartObject.xAxis[0].getExtremes();
    var final_url = buildFullUrl(url, Math.round(e.min/1000), Math.round(e.max/1000));
    // Response returned:
    return ApiFactory.quotes(final_url).then(function(data) {
        // Formatted data returned:
        return formatQuotes(data);
    });
}

// Finally the handlRedraw function is called at the end:
function handleRedraw() {
    vs.chartObject.hideLoading();
    vs.chartObject.redraw();
}

步骤3，调整浏览器窗口的大小。

下面是窗口调整大小函数，该函数将事件广播到chartController，然后单击restoreChartSize，最后更改changePeriodicity：

window.onresize = function(event) {
    $scope.$emit("window.resize");
    $scope.$emit("restore.chart");
};

function restoreChartSize() {
    if (!vs.chartObject.reflowNow) {
        vs.chartObject.reflowNow = vs.chartObject.reflowNow = function() {
            this.containerHeight = this.options.chart.height || $(this.renderTo).height();
            this.containerWidth  = this.options.chart.width  || $(this.renderTo).width();
            this.setSize(this.containerWidth, this.containerHeight, true);
            this.hasUserSize = null;
        }
    }

    vs.chartObject.reflowNow();
    changePeriodicity(vs.interval);
}

function changePeriodicity(newInterval) {
    vs.interval   = newInterval;
    var rightDate = new Date();
    var leftDate  = new Date();

    if ( newInterval == "hour" ) {
        leftDate.setHours(rightDate.getHours()-1);
    }
    else if ( newInterval == "day" ) {
        leftDate.setDate(rightDate.getDate()-1);
    }
    else if ( newInterval == "week" ) {
        leftDate.setDate(rightDate.getDate()-7);
    }
    else if ( newInterval == "month" ) {
        leftDate.setDate(rightDate.getDate()-30);
    }
    else if ( newInterval == "year" ) {
        leftDate.setDate(rightDate.getDate()-365);
    }
    if (vs.chartObject.xAxis) {
        vs.chartObject.showLoading('Loading data...');
        vs.chartObject.xAxis[0].setExtremes(leftDate.getTime(), rightDate.getTime());

    }
    // if (vs.chartObject.loadingShown) {
    //     handleRedraw();
    // }
}

任何想法或方向在这里表示赞赏！