Highcharts，属性'series'的类型不兼容

nxagd54h 于 2022-11-10 发布在 Highcharts

关注(0)|答案(3)|浏览(356)

我正在使用Highchart创建一个Angular 图表，但是在编译时遇到这个错误。属性是兼容的，但是typescript编译器抛出了一个错误。我不明白为什么以及如何避免这个错误。有什么建议吗？我正在使用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"
    ~~~~~~~~~~~~~~~~~~~~~~~~

第一个

highcharts

来源：https://stackoverflow.com/questions/65992285/highcharts-types-of-property-series-are-incompatible

3条答案

按热度按时间

bpsygsoo1#

您的数据是正确的，请检查如何铸造到任何将工作，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接口或扩展现有的TS接口。
演示：https://stackblitz.com/edit/highcharts-angular-basic-line-dpqftl

赞(0）回复(0）举报 2022-11-10

wb1gzix02#