Javascript 价格线消失在高位图表中

我正在使用和角度指令。我所采取的大多数行动都很有可能导致价格线消失，或者更确切地说，不会显示出来

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

^以上百分比基于感觉：(

^还请注意，焦点时间线导航器内的线图也会消失。此外，如果将鼠标悬停在图表上，丢失的线的点也会显示出来

---

下面是图表的外观（但焦点线也在下面）：

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

这是我的图表 如何生成我的图表：

步骤1：绘制价格线图 在我的TickerController中，我向chartController广播要绘制线的ticker：

$scope.$emit（“display.chart”，vm.ticker.ticker）；

My HighCharts控制器接收事件并开始工作：

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

下面是displayChart函数，其承诺等待API GET（承诺返回quote_data中的数据）：

现在回到我的eventListener

$scope.$on（“display.chart”，函数（event，ticker）{

displayChart返回承诺和数据后，我添加序列，然后调用

checkForTags（）

：

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

---

感谢您的任何想法和指导！

我们终于找到了答案

由于某种原因，正是这个

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/>';
}

函数工具提示格式化程序（即）{
if（this.color==“#4C73FF”&&this.y>0）{
this.y='$'+this.y.money（2）；
}否则，如果（此.y>999）{
this.y=this.y.format逗号（）；
}
返回“\u25CF”+this.series.name+”：“+this.y+”
”；
}

您能否在现场演示中复制一个最小的、有效的问题示例？要确定这是一个插件问题还是Highcharts问题，如果您可以在不使用插件的情况下重新创建该问题，这将非常有用。现在您的问题看起来更像是一个调试问题。我会尽快解决！我必须托管准确的Highcharts代码如果您喜欢使用另一种形式的支持，允许更机密的数据交换，您可以使用论坛联系Highcharts支持（您可以在那里使用PM）或者通过电子邮件-。当问题得到解决时，我们可以在这里发布解决方案，然后问题就会得到回答。我希望我在这篇评论中所写的内容不会因此被禁止。@KacperMadej嗨，我正在开始一个Plnkr的工作，以复制这个错误，但是现在被另一个错误卡住了，介意吗？我看到问题已经解决了。这是专业的吗问题也解决了吗？

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

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

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

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

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/>';
}