javascript - Angular Highcharts 在尝试绘制直方图时返回错误

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'.

Hello World :

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中提到的有点不同。

The histogram requires the following module modules/histogram-bellcurve.js.

The histogram series is a column series with no padding between the columns and with self-setting data. Unlike most other Highcharts series, the data property is not available - it is set internally based on the base series data (more precisely y values of the data).

Two steps are required to create an Histogram chart:

Set the series type to histogram 2. Set baseSeries to the right data series’ id or index.

在你的 Angular 项目中这意味着:

<强>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
    }]
  };

希望这有帮助。