Ошибка: неожиданный токен. Ожидается конструктор, метод, средство доступа или свойство. ts (1068)

Question

Я пытаюсь построить диаграмму ap ie, используя библиотеку Highcharts с angular 8. Но когда я пытаюсь расшифровать код, представляющий диаграмму, появляется ошибка. Извините за мой плохой английский sh

Это мой downloads-chart.component.ts:

import { Component, OnInit, OnChanges, Input, SimpleChanges } from '@angular/core';
import * as Highcharts from 'highcharts';
import HC_exporting from 'highcharts/modules/exporting';
import { Numbers } from 'src/app/model/all/Number';
import { DownloadIOS } from 'src/app/model/all/DownloadIOS';
import { DownloadAndroid } from 'src/app/model/all/DownloadAndroid';
import { NumeroDownload } from 'src/app/model/all/NumeroDownload';
import { SeriesDiagramm } from 'src/app/model/all/SeriesDiagramm';
import { ArrayDiagramm } from 'src/app/model/all/ArrayDiagramm';
import { DashboardService } from 'src/app/modules/dashboard.service';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';

declare var require: any;
let Boost = require('highcharts/modules/boost');
let noData = require('highcharts/modules/no-data-to-display');
let More = require('highcharts/highcharts-more');

Boost(Highcharts);
noData(Highcharts);
More(Highcharts);
noData(Highcharts);

@Component({
  selector: 'app-downloads-chart',
  templateUrl: './downloads-chart.component.html',
  styleUrls: ['./downloads-chart.component.scss']
})
export class DownloadsChartComponent implements OnInit {
  // tslint:disable-next-line: no-input-rename
  @Input('diagramName') diagram: Numbers;


  arrIos = new DownloadIOS();
  arrAndr = new DownloadAndroid();
  arrDownload = new NumeroDownload();

  chartOptions = {};
  Highcharts = Highcharts;
  @Input() data = [];

  arrayIos: any[];
  arrayDownloads: any[];
  seriesProva: SeriesDiagramm[];
  seriesIOS: ArrayDiagramm[];
  seriesAndr: ArrayDiagramm[];
  seriesTot: ArrayDiagramm[];


  constructor(
    public service: DashboardService,
    public http: HttpClient,
    public router: Router,
  ) { }

  ngOnInit() {
    this.arrayIos = [];
    this.seriesProva = [];
    this.seriesIOS = [];
    this.seriesAndr = [];
    this.seriesTot = [];
    this.arrayDownloads = [];
    // tslint:disable-next-line: no-unused-expression
    Highcharts.defaultOptions;
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes.diagram.currentValue.tipoDiagramma === 1) {
      this.diagram = changes.diagram.currentValue;
      this.getStatisticDownloads();
    }
  }

  getStatisticDownloads() {
    this.service.getStatisticDownloadAndroid().subscribe((resp) => {
      this.service.getStatisticDownloadIOS().subscribe((respons) => {
        this.service.getStatisticNumeroDownload().subscribe((response) => {
          this.arrAndr = resp;
          this.arrIos = respons;
          this.arrDownload = response;
          this.arrayIos.push(this.arrIos);
          this.statistic3();
        });
      });
    });
  }

  statistic3() {
    let cont = 0;
    while (cont === 0) {
      this.seriesProva[cont] = new SeriesDiagramm();
      this.seriesProva[cont].data = new Array<ArrayDiagramm>();
      for (let i = 0; i < this.arrayIos.length; i++) {
        this.seriesIOS[i] = new ArrayDiagramm();
        this.seriesIOS[i].name = 'IOS';
        this.seriesIOS[i].y = this.arrIos.numeroDownloadIOS;
        this.seriesAndr[i] = new ArrayDiagramm();
        this.seriesAndr[i].name = 'Android';
        this.seriesAndr[i].y = this.arrAndr.numeroDownloadAnd;
        this.seriesTot[i] = new ArrayDiagramm();
        this.seriesTot[i].name = 'All';
        this.seriesTot[i].y = this.arrDownload.numeroDownload;
        this.seriesProva[cont].data.push(this.seriesIOS[i]);
        this.seriesProva[cont].data.push(this.seriesAndr[i]);
        this.seriesProva[cont].data.push(this.seriesTot[i]);
      }
      this.arrayDownloads.push(this.seriesProva[cont]);
      cont++;
    }
    this.diagrammaTorta();
  }

  diagrammaTorta() {
    // tslint:disable-next-line: space-before-function-paren
    Highcharts.addEvent(Highcharts.Chart, 'afterGetContainer', function () {
      this.container.style.background =
        'url(https://www.highcharts.com/samples/graphics/sand.png)';
    });
  }


   // tslint:disable-next-line: prefer-for-of
  // tslint:disable-next-line: quotemark
 // tslint:disable-next-line: no-unused-expression
new Highcharts.Chart({
    colors: ['#4a96d4', '#b53661', '#99c244', '#80699B', '#296d80',
      '#DB843D', '#92A8CD', '#A47D7C', '#61753e'],
    chart: {
      renderTo: 'container',
      height: 450,
      colorCount: 10,
      borderWidth: 1,
      borderColor: '#009933',
      borderRadius: 3,
      plotBorderWidth: 1,
      plotBorderColor: '#eee',
      plotShadow: false,
      backgroundColor: '#fff2',
      style: {
        fontSize: '14px',
        color: 'black'
      },
      type: 'pie',
    },
    legend: {
      padding: 15,
      itemMarginBottom: 5,
      itemMarginTop: 5,
      backgroundColor: '#ebedbe',
      borderColor: '#C98657',
      borderWidth: 1,
      borderRadius: 5,
      align: 'center',
      verticalAlign: 'bottom',
      layout: 'horizontal',
      // x: -30,
      // y: 50,
      itemDistance: 30,
      itemHoverStyle: {
        color: '#FF0000'
      }
    },
    title: {
      style: {
        color: 'black',
        fontSize: '22px',
        fontWeight: 'bold'
      },
      text: 'Numero Downloads App (Commerciale)'
    },
    tooltip: {
      headerFormat: '<span style="font-size:14px"></span><table>',
      pointFormat: '<span style="font-size:14px; color:{series.color}">{point.name}</span>: <b>{point.y}</b><br/>',
      style: {
        fontSize: '14',
        fontWeight: 'bold',
      },
    },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
          enabled: true,
          format: '<span style="font-size:14px; color:{series.color}"><b>{point.name}</b><br>{point.y:,.0f} </span>',
          style: {
            fontSize: '14',
          }
        },
        showInLegend: true,
      }
    },
    series: this.arrayDownloads,
  });
  }

Здесь я получаю ошибку машинописного текста 1068, когда пытаюсь создать диаграмма, на слове новый :

new Highcharts.Chart({

Это мой HTML файл компонента:

<div id="container"></div>

Answer 1

Вы можете удалить ключевое слово new, заключить Highcharts.Chart в функцию и вызвать ее для создания диаграммы. Попробуйте следующее

export class DownloadsChartComponent implements OnInit {
  ...

  createChart() {
    // tslint:disable-next-line: prefer-for-of
    // tslint:disable-next-line: quotemark
    // tslint:disable-next-line: no-unused-expression
    Highcharts.Chart({
      colors: ['#4a96d4', '#b53661', '#99c244', '#80699B', '#296d80', '#DB843D', '#92A8CD', '#A47D7C', '#61753e'],
      ...
    });
  }
}