highchart 在legend中动态显示point点的值

插件分享,闲话就不多说了,主要是实现在legend中动态展示point点的值!

  • 将以下代码单独拷入到文件中,引用在highchart.js文件之后
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    (function (H) {
    H.Series.prototype.point = {};
    H.Chart.prototype.callbacks.push(function (chart) {
    $(chart.container).bind('mousemove', function () {
    var legendOptions = chart.legend.options,
    hoverPoints = chart.hoverPoints;

    if (!hoverPoints && chart.hoverPoint) {
    hoverPoints = [chart.hoverPoint];
    }
    if (hoverPoints) {
    H.each(hoverPoints, function (point) {
    point.series.point = point;
    });
    H.each(chart.legend.allItems, function (item) {
    item.legendItem.attr({
    text: legendOptions.labelFormat ?
    H.format(legendOptions.labelFormat, item) :
    legendOptions.labelFormatter.call(item)
    });
    });
    chart.legend.render();
    }
    });
    });
    // 隐藏tooltip,允许crosshair
    H.Tooltip.prototype.defaultFormatter = function () { return false; };
    }(Highcharts));

说明:上述代码是一段扩展,在callback中为图标重新绑定了mousemove事件,当鼠标滑过某个点,动态修改legendItem的属性,并重新渲染

####来张效果示意图

DEMO地址入口:传送门