Как использовать плагин регрессии Highcharts для построения линии тренда с помощью angular 8 wrapper

Я пытаюсь построить линию тренда на моем сплайновом графике, используя плагин регрессии highcharts. Но я не могу найти ни одного фрагмента, показывающего, как правильно импортировать плагин highcharts-regression в мой угловой компонент.

Я импортировал angular highcharts в свой компонент, как указано в двух строках ниже.

import * as Highcharts from 'highcharts';
import HC_exporting from 'highcharts/modules/exporting';
HC_exporting(Highcharts);

и в html:

 <highcharts-chart [Highcharts]="highcharts" [options]="chartOptions"
       [callbackFunction]="chartCallback"  [(update)]="updateFlag"  [oneToOne]="oneToOneFlag"
         style="width: 100%; height: 400px; display: block;">
     </highcharts-chart>

Ниже я упомянул параметры highchart, используемые для построения моего сплайн-графика в моем компоненте angular8.

chartOptions = {
    chart: {
      type: 'spline'
    },
    title: {
      text: 'With Outliers'
    },
    xAxis: {
      title: {text: 'Chunk Order'},
      tickInterval: 10,
      categories: [
                2,4,5,7,8
      ]
    },
    yAxis: {
      title: {
        text: 'Oil Pressure'
      }
    },
    plotOptions: {
      series: {
        marker: {
          enabled: false,
          fillColor: '#f5bf42',
        }
      }
    },
    series: {
      name: 'oilpressure',
      lineColor: '#f5bf42',
      regression: true,
      /* regressionSettings: {
        name : 'oilpressure',
        type: 'linear',
        color: 'rgba(223, 183, 83, .9)',
        dashStyle: 'dash'
      }, */
    
      data: [345, 678,654,772,352]

    }
  };```

angular angular8 regression highcharts angular-highcharts
person Vinayak kaviskar    schedule 21.09.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Все, что вам нужно сделать, это установить пакет highcharts-regression, затем импортировать его и инициализировать с помощью highcharts (как вы это делали с модулем экспорта).

import { Component } from "@angular/core";
import * as Highcharts from 'highcharts';

declare function require(name:string);
const HC_Regression = require('highcharts-regression');
HC_Regression(Highcharts);
...

Интерактивная демонстрация:
https://stackblitz.com/edit/highcharts-angular-highcharts-regression?file=src/app/app.component.ts

person Mateusz Kornecki    schedule 22.09.2020
comment
Спасибо @Mateusz Kornecki, упомянутое вами решение помогло, и оно сработало, но оно работает только для статических данных. Когда я снова пытаюсь обновить данные серии после получения данных от другого вызова API, он снова удаляет линию тренда. Я обновил вопрос, упомянув, как я использую компонент highchart в html-коде. Также, когда я получаю данные из api, я обновляю объект chartOptions, используя строку ниже this.chartOptions.series = newdata; - person Vinayak kaviskar; 23.09.2020
comment
Кажется, что highcharts-regression не работает с динамическими данными (jsfiddle.net/BlackLabel/0o9uq5g1). Поскольку это сторонний продукт, я предлагаю связаться с автором github.com/streamlinesocial/highcharts-regression/ - person Mateusz Kornecki; 28.09.2020