angular - 在 Angular 6 中实现区域类型图表 Highcharts

Question

我正在使用区域类型的 highchart，但出现此错误

类型'typeof import（“/home/bsideveloper5/Documents/Dev-Projects/HybsefrontendV3/demov3/Hybse-v3-fronten ...”上不存在属性“颜色”。

试了好几次，怎么找回来。

我正在使用 npm 包npm i highcharts-angular

import { Component, OnInit, Input } from '@angular/core';
import * as Highcharts from 'highcharts/highstock';
import { ApiUrlService } from 'src/app/services/api-url/api-url.service';

import { ApirequestService } from 'src/app/services/apirequest/apirequest.service';
Highcharts.setOptions({
  title: {
    style: {
      color: '#FFFFFF'
    }
  }
});
@Component({
  selector: 'hybse-high-area-charts',
  templateUrl: './high-area-charts.component.html',
  styleUrls: ['./high-area-charts.component.css']
})
export class HighAreaChartsComponent implements OnInit {

  Highcharts = Highcharts;
  public chartOptions: any;

  constructor(private _urls: ApiUrlService, private _req: ApirequestService) {

  }

  ngOnInit() {


    this.getHighCharts();
  }
  private getHighCharts(): void {
    this._req.fetchApiData(this._urls.areachartsUrl + `idCompanyStock=${this.idCompanyStock}`, {}, false, 'get').subscribe((res: any) => {
      this.arrayData = res;
      this.chartOptions = {
        colors: ['#2b908f', '#90ee7e', '#f45b5b', '#7798BF', '#aaeeee', '#ff0066',
          '#eeaaee', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee'],
            chart: {
          backgroundColor: {
            linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
            stops: [
              [0, 'rgb(22, 26, 35)'],
              [1, 'rgb(22, 26, 35)']
            ]
          },
          style: {
            fontFamily: '\'Unica One\', sans-serif'
          },
          plotBorderColor: '#606063',
          plotAreaWidth: 900,
          plotAreaHeight: 200
        },
        xAxis: {
          gapGridLineWidth: 0,
          gridLineColor: '#707073',
          labels: {
            style: {
              color: '#E0E0E3'
            }
          },
          lineColor: '#707073',
          minorGridLineColor: '#505053',
          tickColor: '#707073',
          title: {
            style: {
              color: '#A0A0A3'
                }
          }
        },
        yAxis: {
          gridLineColor: '#707073',
          labels: {
            style: {
              color: '#E0E0E3'
            }
          },
          lineColor: '#707073',
          minorGridLineColor: '#505053',
          tickColor: '#707073',
          tickWidth: 1,
          title: {
            style: {
              color: '#A0A0A3'
            }
          }
        },
        tooltip: {
          backgroundColor: 'rgba(0, 0, 0, 0.85)',
          style: {
            color: '#F0F0F0'
          }
        },

        plotOptions: {
          series: {
            dataLabels: {
              color: '#B0B0B3'
            },
            marker: {
              lineColor: '#333'
            },
            showInLegend: false
          },
          boxplot: {
            fillColor: '#505053'
          },
          candlestick: {
            lineColor: 'white'
          },
          errorbar: {
            color: 'white'
          }
        },
        legend: {
          itemStyle: {
            color: '#E0E0E3'
          },
          itemHoverStyle: {
            color: '#FFF'
          },
          itemHiddenStyle: {
            color: '#606063'
          },
          enabled: true,
        },
        labels: {
          style: {
            color: '#707073'
          }
        },

        drilldown: {
          activeAxisLabelStyle: {
            color: '#F0F0F3'
          },
          activeDataLabelStyle: {
            color: '#F0F0F3'
          }
        },

        navigation: {
          buttonOptions: {
            symbolStroke: '#DDDDDD',
            theme: {
              fill: '#505053'
            }
          }
        },

        rangeSelector: {
          inputEnabled: false,
          selected: 1,

          buttonTheme: {
            fill: '#505053',
            stroke: '#000000',
            style: {
              color: '#CCC'
            },
            states: {
              hover: {
                fill: '#707073',
                stroke: '#000000',
                style: {
                  color: 'white'
                }
              },
              select: {
                fill: '#000003',
                stroke: '#000000',
                style: {
                  color: 'white'
                }
              }
            }
          },
          inputBoxBorderColor: '#505053',
          inputStyle: {
            backgroundColor: '#333',
            color: 'silver'
          },
          labelStyle: {
            color: 'silver'
          }
        },
        navigator: {
          handles: {
            backgroundColor: '#666',
            borderColor: '#AAA'
          },
          outlineColor: '#CCC',
          maskFill: 'rgba(255,255,255,0.1)',
          series: {
            color: '#7798BF',
            lineColor: '#A6C7ED'
          },
          xAxis: {
            gridLineColor: '#505053'
          }
        },

        scrollbar: {
          barBackgroundColor: '#808083',
          barBorderColor: '#808083',
          buttonArrowColor: '#CCC',
          buttonBackgroundColor: '#606063',
          buttonBorderColor: '#606063',
          rifleColor: '#FFF',
          trackBackgroundColor: '#404043',
          trackBorderColor: '#404043'
        },
        legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
        background2: '#505053',
        dataLabelsColor: '#B0B0B3',
        textColor: '#C0C0C0',
        contrastTextColor: '#F0F0F3',
        maskColor: 'rgba(255,255,255,0.3)',
        series: [
          {
            type: 'area',
            name: 'Price',
            data: res,
            tooltip: {
              valueDecimals: 2
            },
            fillColor: {
              linearGradient: {
                  x1: 0,
                  y1: 0,
                  x2: 0,
                  y2: 1
              },
              stops: [
                  [0, Highcharts.getOptions().colors[0]],
                  [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
              ]
          },

          },
        ]
      };
    },
      (errror) => {

      });

  }

}

这是html代码：

<div *ngIf="arrayData">
    <highcharts-chart [style.width.px]="width" [style.height.px]="height" style="display: block;" [Highcharts]="Highcharts"
     [constructorType]="'stockChart'" [options]="chartOptions">
    </highcharts-chart>
</div>

这段代码中的问题：

stops: [
  [0, Highcharts.getOptions().colors[0]],
  [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]

标签： angularhighcharts