highcharts - 图例中的 Highstock Angular 值

Question

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

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

这是使用 jQuery 访问图表容器并在图例上显示系列值的 Hicharts 示例。

标签： highchartslegend

Answer 1

要摆脱 jquery，您可以在 chart.container 上jquery .bind用 js 替换方法。addEventListener接下来，遵循highcharts-angular 文档并为此插件创建自己的包装器。检查下面发布的演示。

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

演示： https ://codesandbox.io/s/j2j7wxwv7y