Question

以下是该方案。我在一个页面上有多个highstocks说10个图表。目前，我已经编写了500行代码来定位图例，显示工具提示并刷新mousemove上的图例值。

没有。每个图表的图例各不相同。 在鼠标移动时更新所有图例的值。我需要优化我使用的代码highstocks v1.2.2。 Multiple charts with legends

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

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

更新

用户@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;
                            }
                        });
                    }
                }
            }
        }
    }

highstocks - 多个图表的mousemove上的图例位置和刷新图例值

1 个答案: