Как создать расширение Highcharts для компонента Angular 6 - PullRequest
Новая
       6

Как создать расширение Highcharts для компонента Angular 6

0 голосов
/ 28 июня 2018

Я хочу иметь возможность изменить положение всплывающей подсказки для биржевой диаграммы Highchart с параметром разделения всплывающей подсказки, установленным в значение «true».

Я пытаюсь получить эффект, похожий на этот пример в моем компоненте: http://jsfiddle.net/tbguemvL/

Но используя расширение Highcharts и методы плагина: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

Как предлагается в этом посте: Highcharts с общим и раздельным всплывающими подсказками. Можно ли стилизовать надписи xAxis?

Компонент использует библиотеку Highcharts Javascript с определениями типов из DefiniteTyped: 

import * as Highcharts from 'highcharts';
import * as Highchart from 'highcharts/js/highcharts';
import * as HighchartMore from 'highcharts/js/highcharts-more';
import * as HighStockcharts from 'highcharts/highstock';
const HighChartsMore = HighchartMore(Highcharts);

...

public createChart(): HighchartMore {
    const highChart: HighchartMore = new HighStockcharts.StockChart(this.setInitialOptions());
    this.chartCreated.emit(highChart);
    return highChart;
}

Пока я строю параметры для своего графика в this.setInitialOptions(), перед созданием графика я пытался вызвать это: 

Highcharts.wrap(Highcharts.Tooltip.prototype, 'renderSplit', (p, labels, points) => {
  // Before the original function
  console.log('We are about to render a split tooltip!');

  // Now apply the original function with the original arguments,
  // which are sliced off this function's arguments
  p.call(this, labels, points);

  // Add some code after the original function
  console.log('We just finished rendering a split tooltip!');
});

Это не вызывается, когда метод renderSplit должен срабатывать.

Как мне скомпоновать этот оператор обтекания в машинописном компоненте Angular 6 и где я мог бы разместить код обертки, чтобы заставить его выполнять и расширять метод?

1 Ответ

0 голосов
/ 29 июня 2018

Вы должны добавить свою обертку перед рендерингом диаграммы, например после этой строки: const HighChartsMore = HighchartMore(Highcharts); Highcharts.wrap(...);.

Дополнительно:

Вы загружаете Highcharts и Highstock -> это вызовет ошибки. Highstock содержит Highcharts, поэтому нет необходимости загружать Highcharts.

...