HighChart выделить точку

Question

Я использую HighChart с Angular: https://www.npmjs.com/package/angular-highcharts.

Я пытаюсь воспроизвести демонстрацию Синхронизированные графики

Код, который у меня есть, почти такой жеиз демо, с небольшими изменениями.

TS:

highlight(e: any) {
      var chart: Chart,
          point,
          i,
          event;

      for (i = 0; i < this.list_redenredCharts.length; i = i + 1) {       
        chart = this.list_redenredCharts[i];
        // Find coordinates within the chart
        event = chart.ref.pointer.normalize(e);
        // Get the hovered point
        const points = this.list_redenredCharts[0].ref.hoverPoint;
        const serie = chart.ref.series[0] as any;

        point = serie.searchPoint(event, true);



        if (point) {
            point.highlight(e);
      }
    }

Разница здесь в том, что у меня есть мой список диаграмм внутри this.list_renderedCharts, и мои типы событий получены в моем html div.

Результат будет таким же, пока я не доберусь до выделенной части кода point.highlight(e), где я получу следующую ошибку на консоли: point.highlight is not a function.

Демонстрация на сайте использует версию highchart 7.0.x,в то время как у меня, кажется, версия 8. Кто-нибудь знает, как получить основной момент в данный момент?

Answer 1

point.highlight не является функциональностью по умолчанию. Он добавляется только в демонстрационную версию синхронизированных диаграмм, поэтому вы должны добавить его вручную в свое приложение.

Создайте новый файл и добавьте туда следующий код (пример sync-extension.js):

export const syncChartsInit = function(Highcharts) {
  /**
   * Override the reset function, we don't need to hide the tooltips and
   * crosshairs.
   */
  Highcharts.Pointer.prototype.reset = function() {
    return undefined;
  };

  /**
   * Highlight a point by showing tooltip, setting hover state and draw crosshair
   */
  Highcharts.Point.prototype.highlight = function(event) {
    event = this.series.chart.pointer.normalize(event);
    this.onMouseOver(); // Show the hover marker
    this.series.chart.tooltip.refresh(this); // Show the tooltip
    this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
  };
};

Внутри компонента диаграммы импортируйте и инициализируйте его:

import * as Highcharts from "highcharts";
import * as syncCharts from "./sync-addition";

syncCharts.syncChartsInit(Highcharts);

Демонстрация:

• https://codesandbox.io/s/ry839k99om