Highcharts 图例中的高余量角度值

我正在寻找图例中插件值的替代方案。 该插件使用jQuery，我正在运行Angular 5应用程序。 以前是否有人为此创建了解决方案

labelFormat: '<span style="color:{color}">{name}</span>: <b>{point.y:.2f} USD</b> ({point.change:.2f}%)<br/>'

labelFormat:'{name}:{point.y:.2f}美元（{point.change:.2f}%）

---

下面是一个使用jQuery访问图表容器并在图例上显示序列值的示例。

要摆脱jQuery，可以在chart.container上将

jQuery.bind

方法替换为js

addEventListener

。接下来，跟随并为这个插件创建您自己的包装器。查看下面发布的演示

Value-in-legend.js插件：

(function(factory) {
  if (typeof module === "object" && module.exports) {
    module.exports = factory;
  } else {
    factory(Highcharts);
  }
})(function(Highcharts) {
  Highcharts.Series.prototype.point = {}; // The active point
  Highcharts.Chart.prototype.callbacks.push(function(chart) {
    chart.container.addEventListener("mousemove", function() {
      var legendOptions = chart.legend.options,
        hoverPoints = chart.hoverPoints;

      // Return when legend is disabled (#4)
      if (legendOptions.enabled === false) {
        return;
      }

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

接下来，在组件中初始化它：

require("./path-to-your-file/value-in-legend")(Highcharts);

演示：