时间戳

首页 > 解决方案 > Highchart 没有定义角度 9

angular - Highchart 没有定义角度 9

问题描述

我想用 highcharts 创建一个饼图，但在控制台中出现错误Highchart is not defined。

这是我的 package.json：

"dependencies": {
"@angular/animations": "~8.1.2",
"@angular/cdk": "~8.2.3",
"@angular/common": "~8.1.2",
"@angular/compiler": "~8.1.2",
"@angular/core": "~8.1.2",
"@angular/forms": "~8.1.2",
"@angular/material": "^8.2.3",
"@angular/platform-browser": "~8.1.2",
"@angular/platform-browser-dynamic": "~8.1.2",
"@angular/router": "~8.1.2",
"hammerjs": "^2.0.8",
"highcharts": "^8.2.1",
"highcharts-angular": "^2.4.0",
"rxjs": "~6.4.0",
"tslib": "^1.9.0",
"zone.js": "~0.9.1" }

这是我的component.ts：

import * as Highcharts from  'highcharts';

export class DrawPiechartComponent implements OnInit {
highcharts = Highcharts;
chartOptions: any;
ngOnInit() {
this.prepareLinechart(); }
prepareLinechart() {
this.chartOptions = {
  chart : {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type : 'pie'
  },
  title: {
    text: ''
  },
  tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  },
  accessibility: {
    point: {
      valueSuffix: '%'
    }
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: true,
        format: '<b>{point.name}</b>: {point.percentage:.1f} %'
      }
    }
  },
 
  series: [{
    name: 'Pie',
    colorByPoint: true,
    data: this.historicalData
}] }

在 html 中：

<highcharts-chart *ngIf="chartOptions" [Highcharts]="highcharts" [options]="chartOptions"
  style="width: 100%; height: 400px; display: block;">

module.ts ：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DrawLinechartComponent } from './draw-linechart/draw- 
linechart.component';
import { HighchartsChartModule } from 'highcharts-angular';
import { DrawPiechartComponent } from './draw-piechart/draw- 
piechart.component';

@NgModule({
declarations: [
AppComponent,
DrawLinechartComponent,
DrawPiechartComponent
],
imports: [
BrowserModule,   
HighchartsChartModule
],
providers: [DataFromFormService],
bootstrap: [AppComponent]  
})
export class AppModule { }

PS：我有另一个使用 highchart 绘制折线图的组件，效果很好！问题可能与它有关吗？（因为我在饼图组件和折线图组件中导入了2次highchart）

这是另一个组件：

import * as Highcharts from  'highcharts';
highcharts = Highcharts;
chartOptions: any;
 prepareLinechart() {
this.chartOptions = {
   chart: {
      type: 'line'
   },
   title: {
      text: '',
      style: {
         color: '#9E0E40',
         fontWeight: 'bold'
     }
   },

   legend: {   
      align: 'center',
   },
   
   xAxis: {
      categories: this.historicproducts
      title: {
         text: "Date",
         margin: 45
      },
      width:1100
   },
   yAxis: {
     
      title: {
         text: 'Data'
      }
   },
   series: [
      {
         name:"historics",
         data: this.products
     
      }]
};
and it has the same html

谁能帮我 ？

标签： angularhighcharts

解决方案

问题是highchart的8.2.1版本所以解决方法是更改​​版本npm install highcharts@8.1.0 --save

推荐阅读