Как исправить эту ошибку. Тип «число» не имеет общих свойств с типом «XrangePointOptionsObject».

Я получаю эту ошибку. Тип «число» не имеет общих свойств с типом «XrangePointOptionsObject». Я хочу добавить гистограмму, используя angular highchatrs, в своем проекте angular, но я не могу добавить из-за этой ошибки. Итак, не могли бы вы помочь мне решить эту ошибку.

Спасибо.

это мой файл component.ts

import { Chart } from 'angular-highcharts';
import * as Highcharts from 'highcharts'

 @Component({
  selector: 'app-bar-chart',
  templateUrl: './bar-chart.component.html',
  styleUrls: ['./bar-chart.component.scss']
 })
export class BarChartComponent implements OnInit {

 orderChart: Chart;
 revenueChart: Chart;
 options: Highcharts.Options;

 constructor() { }

  ngOnInit() {
   this.init();
 }

 init() {
   this.options = {
    chart: {
      type: 'column'
    },
    title: {
      text: 'Total Predected Vs Actual'
   },
   xAxis:{
      categories: ['2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017'],
      crosshair: true        
   },     
   yAxis : {
      min: 0 ,

   },
   tooltip : {
      headerFormat: '<span style = "font-size:10px">{point.key}</span><table>',
      pointFormat: '<tr><td style = "color:{series.color};padding:0">{series.name}: </td>' +
         '<td style = "padding:0"><b>{point.y:.1f} mm</b></td></tr>', footerFormat: '</table>', 
   shared: true, useHTML: true
   },
   plotOptions : {
      column: {
         pointPadding: 0.2,
         borderWidth: 0
      }
   },
   series: [
      {
         name: "Predected",
         data :[14,17,9,10,6,19,6,8]
      },
      {
         name: "Actual",
         data: [65,74,44,66,9,23,36,51]
      }
      ]
 };
 let orderChart = new Chart(this.options);
 this.orderChart = orderChart;

 let revenueChart = new Chart(this.options);
 this.revenueChart = revenueChart;
 }

}

поэтому ошибка отображается на данных в серии.


person Shubham Patil    schedule 27.05.2020    source источник
comment
Воспроизводю ваш код по инструкции highcharts-angular и все работает нормально - ошибок нет. Демонстрация: codesandbox.io/s/angular-53ncl API: github.com/highcharts/highcharts-angular   -  person Sebastian Wędzel    schedule 28.05.2020
comment
@SebastianWędzel Я благодарен за вашу помощь.   -  person Shubham Patil    schedule 29.05.2020


Ответы (1)


Я столкнулся с той же проблемой. вам нужно использовать следующий ввод

[runOutsideAngular]="true"

так и будет

<highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions.trends" [runOutsideAngular]="true"
            style="width: 100%; height: 400px; display: block;">
</highcharts-chart>
person Sunil Garg    schedule 08.06.2020