Angular highcharts возвращает ошибку при попытке нарисовать гистограмму

Question

Я пытаюсь реализовать эту гистограмму с использованием старших графиков и старших графиков- 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

реализация гистограммы немного отличается от описанной в документах

Для гистограммы требуются следующие модули модуля / histogram-bellcurve. js.

Серия гистограмм - это серия столбцов без отступов между столбцами и с данными самонастройки. В отличие от большинства других серий Highcharts, свойство data недоступно - оно устанавливается внутренне на основе данных базового ряда (точнее, значений y данных).

Для создания диаграммы гистограммы требуется два шага:

Установите тип ряда на гистограмму 2. Установите для baseSeries идентификатор или индекс правильного ряда данных.

в вашем angular -проектируйте это означает:

1. вам необходимо импортировать модуль гистограммы-колокольчика в ваш компонент:

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

надеюсь, это поможет.