javascript - 价格线在 HighChart 中消失

Question

我正在使用HighCharts和 Angular highcharts-ng指示。我采取的大多数操作很可能导致价格线消失，或者实际上不显示。

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

^以上百分比是基于感觉:(

^ 另请注意，焦点时间轴导航器内的折线图也会消失。此外，如果您将鼠标悬停在图表上，则会显示缺失线的点。

---

下面是图表的样子(但是焦点线也在下面):

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

这是我的图表配置

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中，我广播了哪个tickers来绘制一条线以输出到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;
}

现在回到我的事件监听器$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 步，调整浏览器窗口大小。

下面是窗口调整大小函数，向图表 Controller 广播一个事件，然后点击restoreChartSize，最后更改Periodicity:

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

如有任何想法或指示，我们将不胜感激!

Answer 1

我们终于搞清楚了!!!

正是这个 tooltipFormatter 函数由于某种原因把一切搞砸了。

注释掉之后，我们就无法再让价格线消失了!仍然不知道为什么这个错误首先发生:o 这里是 tooltipFormatter 函数:

function tooltipFormatter(that) {
    if (this.color === "#4C73FF" && this.y > 0) {
        this.y = '$' + this.y.formatMoney(2);
    } else if (this.y > 999) {
        this.y = this.y.formatCommas();
    }
    return '<span style="color:' + this.color + '">\u25CF</span> ' + this.series.name + ': <b>' + this.y + '</b><br/>';
}