0

我使用 Angular 9 在 Ionic 5 框架中创建了 Highchart 示例。

我已经浏览了谷歌上的所有解决方案。但是，仍然发生了错误。我的代码如下：

安装了这两个包

$ npm install angular-highcharts@9.0.2

$ npm install highcharts@8.0.4

主页.ts

import { Component, OnInit } from "@angular/core";
import * as Highcharts from "highcharts";
import { Chart } from "angular-highcharts";

@Component({
  selector: "app-home",
  templateUrl: "home.page.html",
  styleUrls: ["home.page.scss"],
})
export class HomePage implements OnInit {
  chart: Chart;

  constructor() {
    this.chart = new Chart({
      chart: {
        type: "line",
      },
      title: {
        text: "Solar Employment Growth by Sector, 2010-2016",
      }, 

      subtitle: {
        text: "Source: thesolarfoundation.com",
      },

      yAxis: {
        title: {
          text: "Number of Employees",
        },
      },

      xAxis: {
        accessibility: {
          rangeDescription: "Range: 2010 to 2017",
        },
      },

      legend: {
        layout: "vertical",
        align: "right",
        verticalAlign: "middle",
      },

      plotOptions: {
        series: {
          label: {
            connectorAllowed: false,
          },
          pointStart: 2010,
        },
      },

      series: [
        {
          type: "line",
          name: "Installation",
          data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
        },
        {
          type: "line",
          name: "Manufacturing",
          data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
        },
        {
          type: "line",
          name: "Sales & Distribution",
          data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
        },
        {
          type: "line",
          name: "Project Development",
          data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
        },
        {
          type: "line",
          name: "Other",
          data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
        },
      ],

      responsive: {
        rules: [
          {
            condition: {
              maxWidth: 500,
            },
            chartOptions: {
              legend: {
                layout: "horizontal",
                align: "center",
                verticalAlign: "bottom",
              },
            },
          },
        ],
      },
    });

  }
  ngOnInit() {}
}

主页.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>


<ion-content [fullscreen]="true">
  <div [chart]="chart"></div>
</ion-content>

Home.page.Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';

import { HomePage } from './home.page';

import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
import * as more from 'highcharts/highcharts-more.src';
import * as exporting from 'highcharts/modules/exporting.src';
import * as heatChart from 'highcharts/modules/heatmap';
import * as heatChartsrc from 'highcharts/modules/heatmap.src';
import * as chartdata from 'highcharts/modules/data';
import * as chartdatasrc from 'highcharts/modules/data.src';
import * as boostcanvace from 'highcharts/modules/boost-canvas';
import * as boostcanvacesrc from 'highcharts/modules/boost-canvas.src';
import * as boost from 'highcharts/modules/boost';
import * as boostsrc from 'highcharts/modules/boost.src';
import * as access from 'highcharts/modules/accessibility';
import * as accesssrc from 'highcharts/modules/accessibility.src';

@NgModule({
  providers: [
    {
      provide: HIGHCHARTS_MODULES, useFactory: () => [
        heatChart,
        heatChartsrc,
        more,
        exporting,
        chartdata,
        chartdatasrc,
        boostcanvace,
        boostcanvacesrc,
        boost,
        boostsrc,
        access,
        accesssrc
      ]
    }],
  imports: [
    CommonModule,
    FormsModule,
    ChartModule,
    IonicModule
    // RouterModule.forChild([
    //   {
    //     path: '',
    //     component: HomePage
    //   }
    // ])
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

我收到了这个错误：

错误 RangeError： InnerSubscriber._error (InnerSubscriber.js:14) 处的 MergeMapSubscriber.notifyError (OuterSubscriber.js:7) 处的 CatchSubscriber.error (catchError.js:25)超出了最大调用堆栈大小。 55) 在 CatchSubscriber._error (Subscriber.js:75) 在 CatchSubscriber.error (Subscriber.js:55) 在 CatchSubscriber.error (catchError.js:32) 在 ThrowIfEmptySubscriber._error (Subscriber.js:75) 在 ThrowIfEmptySubscriber.error (Subscriber.js:55) 在 TakeSubscriber._error (Subscriber.js:75)

4

0 回答 0