如何修复此错误“数字"类型与“XrangePointOptionsObject"类型没有共同的属性 [英] How to fix this error Type 'number' has no properties in common with type 'XrangePointOptionsObject'

问题描述

我收到此错误数字"类型与XrangePointOptionsObject"类型没有相同的属性.我想在我的 angular 项目中使用 angular highchatrs 添加条形图，但由于此错误我无法添加.所以你能帮我解决这个错误吗?

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>

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