Блог

Главная - Вопросы по программированию - Как использовать плагин Highcharts regression для построения линии тренда с использованием оболочки angular 8

Как использовать плагин Highcharts regression для построения линии тренда с использованием оболочки angular 8

#angular #highcharts #regression #angular8 #angular-highcharts

#angular #highcharts #регрессия #angular8 #angular-highcharts

Вопрос:

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

Я импортировал угловые графики в свой компонент, как указано в приведенных ниже 2 строках.

 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]

    }
  };```

Ответ №1:

Все, что вам нужно сделать, это установить 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

Комментарии:

1. Спасибо @Mateusz Kornecki, упомянутое вами решение помогло, и оно сработало, но оно работает только для статических данных. Когда я пытаюсь снова обновить данные «серии» после получения данных из другого вызова api, он снова удаляет линию тренда. Я обновил вопрос, упомянув, как я использую компонент highchart в html-коде. Также, когда я получаю данные из api, я обновляю объект chartOptions, используя строку ниже this.chartOptions.series = newdata;

2. Кажется, что highcharts-regression он не работает с динамическими данными ( jsfiddle.net/BlackLabel/0o9uq5g1 ). Поскольку это сторонний продукт, я предлагаю связаться с автором github.com/streamlinesocial/highcharts-regression /…