如何解决此错误，类型'number'与类型'XrangePointOptionsObject'没有共同的属性 [英] How to fix this error Type 'number' has no properties in common with type 'XrangePointOptionsObject'

问题描述

我遇到此错误，类型'number'与类型'XrangePointOptionsObject'没有共同的属性.我想在我的角度项目中使用角度高差添加条形图，但由于此错误，我无法添加.因此，请您能帮助我解决此错误.

I'm getting this error Type 'number' has no properties in common with type 'XrangePointOptionsObject'. I want to add bar chart using angular highchatrs in my angular project but I'm not able to add because of this error. So can you please help me to solve this error.

谢谢.

这是我的component.ts文件

this is my component.ts file

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

}

因此错误显示在系列数据中.

so the error is shown on the data in the series.

推荐答案

我遇到了同样的问题.您需要使用以下输入

I was facing the same issue. you need to use following input

[runOutsideAngular]="true"

所以会

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

这篇关于如何解决此错误，类型'number'与类型'XrangePointOptionsObject'没有共同的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！