角高图表试图绘制直方图时返回错误

Question

我正在尝试实现this histogram using highcharts和highcharts-angular。我实现了这两个库，并使“ Hello World”图表生效。

但是一旦我尝试将其图表类型更改为'histogram'，就会出现以下错误，指向series对象：

Type '{series...}' is not assignable to 'SeriesOptionsType'.
Type '{series...}' is not assignable to 'SeriesParetoOptions'.

你好世界：

export class AppComponent {
  Highcharts: typeof Highcharts = Highcharts;
  chartOptions: Highcharts.Options = {
    series: [{
      data: [1, 2, 3],
      type: 'line'
    }]
  };
...
}

更改图表类型，发生错误：

export class ChartComponent implements OnInit {

  Highcharts: typeof Highcharts = Highcharts;
  chartOptions: Highcharts.Options = {
    series: [{
      data: [3.5, 3, 3.2, 3.1, 3.6, 3.9, 3.4]
      type: 'histogram',
      xAxis: 1,
      yAxis: 1,
      baseSeries: 1
    }]
  };

  constructor() {
  }

  ngOnInit() {
  }

}

Answer 1

直方图的实现与docs中提到的有点不同

直方图需要以下模块modules / histogram-bellcurve.js。

直方图序列是一个列序列，在列之间没有填充，并且具有自设置数据。与大多数其他Highcharts系列不同，data属性不可用-它是根据基本系列数据（更准确地说是y值）在内部设置的。

创建直方图需要两个步骤：

将系列类型设置为直方图2。将baseSeries设置为正确的数据系列的ID或索引。

在您的angular-project中，这意味着：

1。您需要在组件中导入histogram-bellcurve模块：

import * as Highcharts from 'highcharts/highcharts';
import HC_histogram from 'highcharts/modules/histogram-bellcurve';
HC_histogram(Highcharts);

2。与其他图表不同，它没有数据属性，因此配置包含两个部分。

  Highcharts: typeof Highcharts = Highcharts;
  chartOptions: Highcharts.Options = {
    series: [{
      type: 'histogram',
      xAxis: 0,
      yAxis: 0,
      baseSeries: 1
    },
      {
      type: 'line',
      data: [3.5, 3, 3.2, 3.1, 3.6, 3.9, 3.4],
      id: '1',
      visible: false,
      showInLegend: false
    }]
  };

希望这会有所帮助。