Highcharts，属性“系列”的类型不兼容答案

【问题标题】：Highcharts , Types of property 'series' are incompatibleHighcharts，属性“系列”的类型不兼容
【发布时间】：2021-02-01 11:53:56
【问题描述】：

我正在使用 Highchart 创建角度图表，但我在编译时遇到此错误。属性是兼容的，但打字稿编译器引发错误。我不明白为什么以及如何避免这个错误。有什么建议吗？我正在使用角度 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>

【问题讨论】：

标签： angular typescript highcharts

【解决方案1】：

您的数据是正确的，请检查转换为 any 的工作原理，chartOptions: any = ...。

如果您想遵循规则，则不应使用如下预定义的系列来启动图表：series: this.data。
您可以为系列的每个元素创建一个变量，例如name、data、color 等，或者甚至将其保存在数组中。但是，整个系列的结构应该在chartOptions中定义，否则图表会出错。

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

您也可以始终创建自己的 TS 接口或扩展现有接口。

演示：https://stackblitz.com/edit/highcharts-angular-basic-line-dpqftl

【讨论】：

【解决方案2】：

series:this.data as SeriesOptionsType[]

它对我有用。

【讨论】：