highstocks - 多个图表的鼠标移动图例位置和刷新图例值

Question

这里是场景。我有多个 highstocks 说一页上有 10 个图表。目前我已经编写了 500 行代码来定位图例、显示工具提示并在 mousemove 上刷新图例值。

没有。图例的数量因图表而异。 更新所有图例的 mousemove 值。 我需要优化我正在使用的代码 highstocks v1.2.2。

上面的屏幕截图显示了 2 个图表。 Return、Basket、vs Basket Spread 是图例，它的值在每次鼠标移动时都会更新。

请查找this fiddle for example。在我的例子中，图例是通过数百行代码在鼠标移动时定位和更新值的。 当我移动鼠标时，第一张图表的Return 和Basket 的图例值以及vs Basket Spread 的图例值都会更新。它工作正常，但有很多 javascript 代码。所以我需要优化它，减少代码或使用 highstocks 内置功能。

更新

用户@wergeld 已发布new fiddle。正如我在屏幕截图中显示的那样，当十字准线在任何图表上移动时，所有图表的图例值都应该更新。

有没有办法用更少的代码实现相同的功能，或者highstocks 中是否有内置功能？？？

使用this as a reference。

Answer 1

基本示例是使用events.mouseover 方法：

plotOptions: {
    series: {
        point: {
            events: {
                mouseOver: function () {
                    var theLegendList = $('#legend');
                    var theSeriesName = this.series.name;
                    var theYValue = this.y;
                    $('li', theLegendList).each(function (l) {
                        if (this.innerText.split(':')[0] == theSeriesName) {
                            this.innerText = theSeriesName + ': ' + theYValue;
                        }
                    });
                }
            }
        }
    }
}

这是假设我已将 <li> 修改为：

        $('<li>')
            .css('color', serie.color)
            .text(serie.name + ': NA')
            .click(function () {
            toggleSeries(i);
        })
            .appendTo($legend);

然后您需要处理mouseout 事件，但我不知道您想在那里做什么。 工作example。

编辑： 这是一个version，它使用您的参考 OHLC 图表在图表中的任何点悬停时将值放在不同的图例位置。

    plotOptions: {
        series: {
            point: {
                events: {
                    mouseOver: function () {
                        //using the ohlc and volumn data sets created at runtime.
                        var stockVal = ohlc[this.index][4]; // show close value
                        var stockVolume = volume[this.index][1];
                        var theChart = $('#container').highcharts();
                        var theLegendList = $('#legend');
                        $('li', theLegendList).each(function (l) {
                            var legendTitle = theChart.series[l].name;
                            if (l === 0) {
                                this.innerText = legendTitle + ': ' + stockVal;
                            }
                            if (l === 1) {
                                this.innerText = legendTitle + ': ' + stockVolume;
                            }
                        });
                    }
                }
            }
        }
    }