如何使用 Highcharts 回归插件使用 Angular 8 包装器绘制趋势线

Question

我正在尝试使用 highcharts 回归插件在我的样条图中绘制趋势线。 但我找不到任何显示如何在我的角度组件中正确导入 highcharts-regression 插件的 sn-p。

我已经在我的组件中导入了 angular highcharts，如下 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>

我在下面提到了用于在 angular8 组件中绘制样条图的 highchart 选项。

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]

    }
  };```

Answer 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