如何在角度highcharts模块

时间:2019-02-13 12:53:09

标签: angular typescript highcharts

我正在尝试在加密货币列表视图中显示所选加密货币的价格图表视图,但出现类型不匹配错误。

我在我的应用程序中使用了angular-highcharts模块,并从该模块导入了Chart库。

import { Chart } from 'angular-highcharts';

series: [{
  name: 'Price',
  data: [{
    id: this.comparearray[0].symbol,
    name: this.comparearray[0].name,
    y: this.comparearray[0].quotes.USD.price
  }]
},
{
  name: "Volume_24h",
  data: [{
    id: this.comparearray[0].symbol,
    name: this.comparearray[0].name,
    y: this.comparearray[0].quotes.USD.volume_24h
  }]
}]

我在以上所有行中都收到以下错误:


  

键入'{name:string;数据:{id:any;名称:任何y:任何; } []; }'是   不可分配给'SeriesAbandsOptions |类型SeriesAdOptions |   SeriesAoOptions | SeriesApoOptions | SeriesAreaOptions |   SeriesArearangeOptions | SeriesAreasplineOptions |   SeriesAreasplinerangeOptions | ... 82更多... | SeriesZigzagOptions”。

     

类型'{'中缺少属性'type',名称:string;数据:{id:any;   名称:任何y:任何; } []; }',但必须输入   'SeriesXrangeOptions'.ts(2322)highcharts.d.ts(339172,5):'type'是   在这里声明。


我应该获得所选加密货币的图表视图,显示24小时内的交易量和价格。

4 个答案:

答案 0 :(得分:2)

在图表中使用多个序列时,您需要提及序列的类型。有时只需将代码更改为此即可:

 series: [{
  name: 'Price',
  type:undefined,
  data: [{
    id: this.comparearray[0].symbol,
    name: this.comparearray[0].name,
    y: this.comparearray[0].quotes.USD.price
  }]
},
{
  name: "Volume_24h",
  type:undefined,
  data: [{
    id: this.comparearray[0].symbol,
    name: this.comparearray[0].name,
    y: this.comparearray[0].quotes.USD.volume_24h
  }]
}]

尝试一次。我希望这有助于解决您的问题。

答案 1 :(得分:1)

Property 'type' is missing in type '{ name: string; data: { id: any; name: any; y: any; }[]; }'
  

但是在类型'SeriesXrangeOptions'中是必需的。ts(2322)highcharts.d.ts(339172,5):此处声明了'type'。

错误与代码中Series对象中缺少属性有关。 In TypeScript the type option must always be set.

因此,正确的代码应为:

series: [{

  type: 'xrange`,

  name: 'Price',
  data: [{
    id: this.comparearray[0].symbol,
    name: this.comparearray[0].name,
    y: this.comparearray[0].quotes.USD.price
  }]
},
{

  type: 'xrange`,

  name: "Volume_24h",
  data: [{
    id: this.comparearray[0].symbol,
    name: this.comparearray[0].name,
    y: this.comparearray[0].quotes.USD.volume_24h
  }]
}]

假设您想将xrange设置为两个系列的系列类型。 (而且您可以跳过多余的空行-添加该行只是为了更好地显示更改的代码)

在Highcharts github上报告并解决了同一问题,以供参考:https://github.com/highcharts/highcharts/issues/9867

答案 2 :(得分:1)

尝试

new Chart({YOUR_OPTIONS} as any);

它将纠正错误。

答案 3 :(得分:0)

也收到相同的“ SeriesXrangeOptions”错误,但是xrange不是有效的类型选项。指定序列图类型适用于那些收到无效类型错误的人。

工作示例:

chart = new Chart({
    chart: {
        type: 'line'
    },
    title: {
        text: 'Linechart'
    },
    credits: {
        enabled: false
    },
    series: [{
        type: 'line',
        name: 'Jane',
        data: [1, 0, 4, 6, 11]
    }, {
        type: 'line',
        name: 'John',
        data: [5, 7, 3, 2, 9]
    }]
});