Angular 的 Highcharts 变量饼图

Question

我目前正在开发一个 ASP.NET 应用程序，它的前端是用 TypeScript 编写的 Angular。

我想使用 Variablepie Highcharts 创建一个变量饼图，但我在显示它时遇到问题。

我按照 this 教程结合 Highchart 网站上给出的变量饼图模板进行了学习。

我遇到的第一个问题是 Typescript 抱怨 highcharts 网站上提供的 Serries 选项时出错。

Highcharts.chart('container', {
  chart: {
    type: 'variablepie'
  },
  title: {
    text: 'Countries compared by population density and total area.'
  },
  tooltip: {
    headerFormat: '',
    pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}</b><br/>' +
      'Area (square km): <b>{point.y}</b><br/>' +
      'Population density (people per square km): <b>{point.z}</b><br/>'
  },
  plotOptions: {
    variablepie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: false
      }
    }
  },
  series: [{
    minPointSize: 10,
    innerSize: '20%',
    zMin: 0,
    name: 'countries',
    data: [{
      name: 'Spain',
      y: 505370,
      z: 92.9
    }, {
      name: 'France',
      y: 551500,
      z: 118.7
    }, {
      name: 'Germany',
      y: 357022,
      z: 235.6
    }]
  }]
});

VisualStudio 抱怨它在 serries 对象中缺少 type 属性，因此我添加了一个值为 'variablepie' 的属性。加载组件时，图表似乎不显示。奇怪的是，如果相反，我在 serries 对象中为属性 type 放置 'pie'，饼图是否正确显示？（但我需要可变饼图）有人知道这里的问题吗？

这是我的 Angular 组件的代码：

import { Component, Inject, AfterViewInit} from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { error } from 'protractor';
import { ActivatedRoute } from "@angular/router";
import { Chart } from 'angular-highcharts';
import { SeriesVariablepieOptions, SeriesVariablepieDataOptions } from 'highcharts';

@Component({
  selector: 'app-grades-component',
  templateUrl: './grades.component.html'
})
export class GradesComponent implements AfterViewInit {
  public http: HttpClient;
  public baseUrl: string;
  public courseCode: string;
  chart: Chart;

  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string, route: ActivatedRoute) {
    this.http = http;
    this.baseUrl = baseUrl;
    this.courseCode = route.snapshot.paramMap.get('courseCode');
    console.log("Checking grades for " + this.courseCode);
  }

  ngAfterViewInit() {
    this.initChart();
  }

  public initChart() {

    console.log("Initializing chart");

    this.chart = new Chart({
      chart: {
        type: 'variablepie'
      },
      title: {
        text: 'Countries compared by population density and total area.'
      },
      tooltip: {
        headerFormat: '',
        pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}</b><br/>' +
          'Area (square km): <b>{point.y}</b><br/>' +
          'Population density (people per square km): <b>{point.z}</b><br/>'
      },
      series: [{
        type: "variablepie",
        minPointSize: 10,
        innerSize: '20%',
        zMin: 0,
        name: 'countries',
        data: [{
          name: 'Spain',
          y: 505370,
          z: 92.9
        }, {
          name: 'Germany',
          y: 357022,
            z: 235.6
          }] as SeriesVariablepieDataOptions
      }]
    });


    console.log("Initializing chart DONE");
  }

}

Answer 1

Variablepie系列需要加载额外的模块。您应该将这段代码添加到您的组件中：

// import the module
import * as Variablepie from "highcharts/modules/variable-pie";

// initialize the module
Variablepie(Highcharts);

演示：

https://codesandbox.io/s/mj83zz2y2j

API参考：

Answer 2

另一种方法要求（'highcharts/modules/variable-pie'）（Highcharts）；

Answer 3

这对我有用：

import Variablepie from "highcharts/modules/variable-pie";

Variablepie(Highcharts);

Angular 的 Highcharts 变量饼图

Highcharts Variablepie with Angular

highcharts

angular2-highcharts

angular