Question

我想用高图表创建饼图，但是在控制台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" }

这是我的组件。

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的组件来绘制折线图，并且效果很好！可能与这个问题有关吗？（因为我已经在piechart组件和linechart组件中两次导入了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

有人可以帮助我吗？

Answer 1

问题在于highchart的版本8.2.1，因此解决方案是更改版本npm install highcharts@8.1.0 --save

Highchart未定义角度9

1 个答案: