Highcharts Variablepie с угловым - PullRequest
Новая
       22

Highcharts Variablepie с угловым

0 голосов
/ 08 мая 2019

В настоящее время я работаю над приложением ASP.NET с угловым интерфейсом, написанным на TypeScript.

Я ищу создание круговой диаграммы с использованием Highcharts Variablepie , но у меня возникают проблемы с отображениемit.

Я следовал этому руководству в сочетании с шаблоном, приведенным на веб-сайте Highchart для переменнойpie.

Первая проблема, с которой я сталкиваюсь, - это ошибка, при которой TypescriptComplains опараметры Serries, представленные на сайте highcharts. 

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, круговая диаграмма появится правильно?(Но мне нужна переменная круговая диаграмма) Кто-нибудь может знать проблему здесь?

Вот код суеты для моего углового компонента: 

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");
  }

}

1 Ответ

1 голос
/ 08 мая 2019

Серия переменных переменных требует загрузки дополнительного модуля.Вы должны добавить этот фрагмент кода в свой компонент: 

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

// initialize the module
Variablepie(Highcharts);

Демо:

Ссылка API:

...