angular 6 的 Highcharts 打包气泡图

Question

我正在尝试使用 angular 访问和显示打包气泡图： Link: https://www.highcharts.com/demo/packed-bubble

图表代码：

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

@Component({
  selector: 'app-bu-packedbubble',
  templateUrl: './bu-packedbubble.component.html',
  styleUrls: ['./bu-packedbubble.component.css']
})
export class BuPackedbubbleComponent implements OnInit {
  //
  Highcharts = Highcharts; // required
  //
  buData = [
    {
      name: 'mlisa-qa',
      node_count: 4,
      domains: [
        {
          name: 'wade1'
        },
        {
          name: 'wade2'
        },
        {
          name: 'wad12'
        },
        {
          name: 'wade'
        }
      ]

    },
    {
      name: 'alphanet',
      node_count: 2,
      domains: [
        {
          name: 'alphanet-12'
        },
        {
          name: 'alphanet-122'
        }
      ]
    },
    {
      name: 'bugbash',
      node_count: 4,
      domains: [
        {
          name: 'bugbash-bash',
          zones: [
            {
              name: 'tommy_zone',
              access_point_groups: [
                {
                  name: 'default',
                  access_points: [
                    {
                      name: ''
                    }
                  ]

                },
                {
                  name: 'default12'
                }
              ]
            },
            {
              name: 'sam_zone',
            }
          ]
        }
      ]
    }
  ];
  //
  chartOptions = {
    chart: {
      type: 'packedbubble',
      height: '100%'
    },
    tooltip: {
      useHTML: true,
      pointFormat: '<b>{point.name}</b>'
    },
    plotOptions: {
      packedbubble: {
          minSize: '20%',
          maxSize: '100%',
          zMin: 0,
          zMax: 1000,
          layoutAlgorithm: {
              gravitationalConstant: 0.05,
              splitSeries: true,
              seriesInteraction: false,
              dragBetweenSeries: true,
              parentNodeLimit: true
          },
          dataLabels: {
              enabled: true,
              format: '{point.name}',
              style: {
                  color: 'black',
                  textOutline: 'none',
                  fontWeight: 'normal'
              }
          }
      }
    },
    series: [
      {
        name: 'Network',
        data: [
          {
            name: 'Domain1',
            value: 4
          },
          {
            name: 'Domain2',
            value: 450
          }
        ]
      }
    ]
  };


  constructor() { }

  ngOnInit() {
  }

}

在浏览器控制台上，我收到以下错误：

似乎没有找到类型：'packedbubble'。

我使用以下版本的 highcharts 库版本，angular 版本 6： - "highcharts": "^7.2.1", - "highcharts-angular": "^2.4.0",

Answer 1

你好像没有导入packedbubble系列需要的highcharts-more模块。

示例：

declare var require: any;

import { Component, OnInit, AfterViewInit } from "@angular/core";

import * as Highcharts from "highcharts";
import * as HighchartsMore from "highcharts/highcharts-more";


HighchartsMore(Highcharts);

@Component({
  selector: "app-root",
  templateUrl: "app.component.html"
})
export class AppComponent implements OnInit {
  Highcharts = Highcharts;


  chartOptions = {
    chart: {
      type: 'packedbubble',
    },
    series: [{
      data:         [{
        name: "Poland",
        value: 298.1
    },
    {
        name: "France",
        value: 323.7
    }],
    }
    ]
  };

}

演示：https://codesandbox.io/s/angular-6ly2j

Answer 2

工作代码如下，因为我使用的是 Angular 版本 8:

//
import { Component, OnInit } from '@angular/core';
//
import * as Highcharts from 'highcharts';
require('highcharts/highcharts-more')(Highcharts);

@Component({
  selector: 'app-bu-packedbubble',
  templateUrl: './bu-packedbubble.component.html',
  styleUrls: ['./bu-packedbubble.component.css']
})
export class BuPackedbubbleComponent implements OnInit {
  //
  Highcharts = Highcharts; // required
  //
  buData = [

  ];
  //
  chartOptions = {
    chart: {
      type: 'packedbubble',
    },
    tooltip: {
      useHTML: true,
      pointFormat: '<b>{point.name}</b>'
    },
    plotOptions: {
      packedbubble: {
          minSize: '20%',
          maxSize: '100%',
          zMin: 0,
          zMax: 1000,
          layoutAlgorithm: {
              gravitationalConstant: 0.05,
              splitSeries: true,
              seriesInteraction: false,
              dragBetweenSeries: true,
              parentNodeLimit: true
          },
          dataLabels: {
              enabled: true,
              format: '{point.name}',
              style: {
                  color: 'black',
                  textOutline: 'none',
                  fontWeight: 'normal'
              }
          }
      }
    },
    series: [
      {
        name: 'Network',
        data: [
          {
            name: 'Domain1',
            value: 4
          },
          {
            name: 'Domain2',
            value: 450
          }
        ]
      }
    ]
  };


  constructor() { }

  ngOnInit() {
  }

}

注意Highcharts模块的导入和Highcharts-more的要求：

import * as Highcharts from 'highcharts';
require('highcharts/highcharts-more')(Highcharts);

angular 6 的 Highcharts 打包气泡图

Hightcharts Packed Buble chartt for angular 6

highcharts

angular

angular6

图表代码：