angular - 对象字面量只能指定已知属性，并且在“IndividualSeriesOptions”类型中不存在“标记”

Question

我正在尝试使用以下链接https://www.highcharts.com/demo/combo中提供的 angular 的 highchart

我已将 highcharts 和 ChartModule 导入到 app.module.ts 文件中。此外，我已将 HIGHCHARTS_MODULES 导入到 app.module 中。但我收到了如下所述的错误。如果删除标记，我将无法按预期获得输出。

Argument of type '{ title: { text: string; }; xAxis: { categories:
 string[]; }; labels: { items: { html: string; st...' is not assignable
 to parameter of type 'Options'.   Types of property 'series' are
 incompatible.
    Type '({ type: string; name: string; data: number[]; } | { type: string; name: string; data: number[]; ...' is not assignable to type
'IndividualSeriesOptions[]'.
      Type '{ type: string; name: string; data: number[]; } | { type: string; name: string; data: number[]; m...' is not assignable to type
'IndividualSeriesOptions'.
        Type '{ type: string; name: string; data: number[]; marker: { lineWidth: number; lineColor: string | Gr...' is not assignable to
 type 'IndividualSeriesOptions'.
          Object literal may only specify known properties, and 'marker' does not exist in type 'IndividualSeriesOptions'. (property)
 marker: {
     lineWidth: number;
     lineColor: string | Highcharts.Gradient;
     fillColor: string; }



import { Component, OnInit } from '@angular/core';
    //import { Highcharts } from 'angular-highcharts';
    import { Chart } from 'angular-highcharts';
    //mport { Highcharts } from 'highcharts'

    @Component({
      selector: 'app-weeklychart',
      templateUrl: './weeklychart.component.html',
      styleUrls: ['./weeklychart.component.css']
    })
    export class WeeklychartComponent implements OnInit {

      chart = new Chart({

        title: {
          text: 'Combination chart'
      },
      xAxis: {
          categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
      },
      labels: {
          items: [{
              html: 'Total fruit consumption',
              style: {
                  left: '50px',
                  top: '18px',
                  color: 'black'
              }
          }]
      },
      series: [{
          type: 'column',
          name: 'Jane',
          data: [3, 2, 1, 3, 4]
      }, {
          type: 'column',
          name: 'John',
          data: [2, 3, 5, 7, 6]
      }, {
          type: 'column',
          name: 'Joe',
          data: [4, 3, 3, 9, 0]
      }, {
          type: 'spline',
          name: 'Average',
          data: [3, 2.67, 3, 6.33, 3.33],
          marker: {
              lineWidth: 2,
              lineColor: Highcharts.getOptions().colors[3],
              fillColor: 'white'
          }
      }, {
          type: 'pie',
          name: 'Total consumption',
          data: [{
              name: 'Jane',
              y: 13,
              color: Highcharts.getOptions().colors[0] // Jane's color
          }, {
              name: 'John',
              y: 23,
              color: Highcharts.getOptions().colors[1] // John's color
          }, {
              name: 'Joe',
              y: 19,
              color: Highcharts.getOptions().colors[2] // Joe's color
          }],
          center: [100, 80],
          size: 100,
          showInLegend: false,
          dataLabels: {
              enabled: false
          }
      }]
      });

      constructor() { }

      ngOnInit() {
      }

    }

标签： angularhighcharts