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

Question

Here is the scenario. I've multiple highstocks say 10 charts on a single page. Currently I've written 500 lines of code to position the legend, show tooltip and refresh the legend values on mousemove.

No. of legends vary per chart. On mousemove values of all the legends are updated. I need to optimize the code I am using highstocks v1.2.2.

Above screenshot shows 2 charts. Return , Basket , vs Basket Spread are legends and it's values are updated on every mousemove.

Please find this fiddle for example . In my case legends are positioned and updated values on mouse move with hundreds of lines of code. When I move the mouse the legend values of Return and Basket of first chart and the legend values of vs Basket Spread are updated. It's working fine but with lots of javascript code. So I need to optimize it less code or with highstocks built-in feature.

Update

User @wergeld has posted new fiddle . As I've shown in screenshot when cross-hair is being moved over any chart, the legend values of all the charts should be updated.

Is there anyway to implement the same functionality with less code or is there built-in feature available in highstocks ???

Using this as a reference .

Answer 1

Basic example would be to use the events.mouseover methods:

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

This is assuming I have modded the <li> to be:

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

You would then need to handle the mouseout event but I do not know what you want to do there. Working example .

EDIT: Here is a version using your reference OHLC chart to put the values in a different legend location when any point in the chart is hovered.

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