highcharts 图例中的HighstockAngular 值

fdx2calv  于 2023-04-30  发布在  Highcharts
关注(0)|答案(1)|浏览(228)

我正在寻找图例的插件值的替代方案。插件使用jQuery,我正在运行Angular 5应用程序。以前有人为这个问题制定了解决方案吗?

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

下面是一个sample of Highcharts,它使用jQuery访问图表容器,并在图例上显示系列值。

gblwokeq

gblwokeq1#

要摆脱jquery,您可以在图表上将jquery .bind方法替换为js addEventListener。接下来,按照highcharts-angular文档,为这个插件创建你自己的 Package 器。查看下面发布的演示。
传奇中的价值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

相关问题