angular - Highcharts, Tipovi svojstva 'series' nisu kompatibilni

Kreiram grafikone u Angularu koristeći Highchart, ali dobivam ovu pogrešku prilikom kompajliranja. Svojstva su kompatibilna, ali TypeScript kompajler baca pogrešku. Ne razumijem zašto i kako izbjeći ovu pogrešku. Imate li neki prijedlog? Koristim Angular 11

 error TS2322: Type '{ chart: { type: string; }; title: { text: string; }; xAxis: { categories: string[]; }; yAxis: { title: { text: string; }; }; series: ({ name: string; data: number[]; type: string; color?: undefined; } | { name: string; data: number[]; type: string; color: string; })[]; }' is not assignable to type 'Options'.
  Types of property 'series' are incompatible.
    Type '({ name: string; data: number[]; type: string; color?: undefined; } | { name: string; data: number[]; type: string; color: string; })[]' is not assignable to type 'SeriesOptionsType[]'.
      Type '{ name: string; data: number[]; type: string; color?: undefined; } | { name: string; data: number[]; type: string; color: string; }' is not assignable to type 'SeriesOptionsType'.
        Type '{ name: string; data: number[]; type: string; color?: undefined; }' is not assignable to type 'SeriesOptionsType'.       
          Type '{ name: string; data: number[]; type: string; color?: undefined; }' is not assignable to type 'SeriesXrangeOptions'.   
            Types of property 'data' are incompatible.
              Type 'number[]' is not assignable to type 'XrangePointOptionsObject[]'.
                Type 'number' has no properties in common with type 'XrangePointOptionsObject'.

3   [options]="chartOptions"
    ~~~~~~~~~~~~~~~~~~~~~~~~

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';

  title = 'myHighchart';
  Highcharts: typeof Highcharts = Highcharts;

  data = [{

          name: 'ItSolutionStuff.com',
          data: [500, 700, 555, 444, 777, 877, 944, 567, 666, 789, 456, 654],
          type: "spline",
          

       },{      
          name: 'Nicesnippets.com',
          data: [677, 455, 677, 877, 455, 778, 888, 567, 785, 488, 567, 654],
          type: "spline",
           color: '#3183F5'

       }];
 
       chartOptions = {   
    chart: {
      type: "spline"

    },
    title: {
       text: "Monthly Site Visitor"
    },
    xAxis:{
       categories:["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
    },
    yAxis: {          
       title:{
          text:"Visitors"
       } 
    },
    series: this.data
  };
 

<highcharts-chart
  [Highcharts]="Highcharts"
  [options]="chartOptions"
  style = "width: 100%; height: 400px; display: block;">

></highcharts-chart>

Odgovor #1

Vaši podaci su točni, molimo provjerite kako će raditi pretvorba u any, chartOptions: any=....

Kada želite slijediti pravila, ne biste trebali inicirati grafikon s unaprijed definiranim serijama poput ovoga: series: this.data.
Možete stvoriti varijablu za svaki element serije, na primjer name, data, color itd., ili čak to zadržati u nizu. Međutim, cijela struktura serije trebala bi biti definirana u chartOptions, inače će grafikon baciti pogreške.

series: [
  {
    name: this.name1,
    type: "spline",
    data: this.data1
  },
  {
    type: "spline",
    data: this.data2,
    name: "Nicesnippets.com",
    color: "#3183F5"
  }
]

Također biste uvijek mogli stvoriti vlastiti TS sučelje ili proširiti postojeće.

Demo: https://stackblitz.com/edit/highcharts-angular-basic-line-dpqftl

Odgovor #2

series:this.data as SeriesOptionsType[]

To je djelovalo za mene.