Highstock Угловое значение в легенде

Question

Я ищу альтернативы для значений плагинов в легенде.Плагин использует jQuery, и я запускаю приложение Angular 5.Кто-то создал решение для этого раньше?

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

Вот пример Hicharts , использующий jQuery для доступа к контейнеру диаграммы и отображения значения серии в легенде.

Answer 1

Чтобы избавиться от jquery, вы можете заменить метод jquery .bind на js addEventListener на chart.container.Далее, следуйте документациям 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