angular - 如何在 Angular 8 中实现 highcharts 的组织结构图？

Question

我想使用 Angular 8 集成 Highcharts 中的组织结构图。

但是，当我尝试使用以下代码实现时，它在系列类型中抛出错误

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

import * as Highcharts from 'highcharts';
import HighchartsSankey from "highcharts/modules/sankey";
import HighchartsOrganization from "highcharts/modules/organization";
import HighchartsExporting from "highcharts/modules/exporting";

HighchartsSankey(Highcharts);
HighchartsOrganization(Highcharts);
HighchartsExporting(Highcharts);

@Component({
  selector: 'organization-users',...
})
export class OrganizationComponent implements OnInit {
  ngOnInit() {

    Highcharts.chart({
      chart: {
          height: 600,
          inverted: true
      },

      title: {
          text: 'Highcharts Org Chart'
      },

      series: [{
          **type: 'organization',**
          keys: ['from', 'to'],
          data: [
              ['Shareholders', 'Board'],
              ['Board', 'CEO'],
              ['CEO', 'CTO'],
              ['CEO', 'CPO']
          ],...

Answer 1

渲染组织结构图可能很棘手。

如果我们必须在那里使用任何其他模块，我们必须首先按照他们的建议在 Highcharts 中注册它们 in this article here .

由于我们需要使用 organization 模块，该模块也依赖于 sankey，因此我们首先必须注册 sankey，然后组织与高图表。这就是以下几行的作用:

declare var require: any;
let sankey = require("highcharts/modules/sankey");
let organization = require("highcharts/modules/organization");

sankey(Highcharts);
organization(Highcharts);

完成后，渲染图表就非常简单了。

在这里，尝试一下:

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

declare var require: any;
let sankey = require("highcharts/modules/sankey");
let organization = require("highcharts/modules/organization");

sankey(Highcharts);
organization(Highcharts);

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  @ViewChild("orgChartContainer", { static: false }) orgChartContainer;

  ngOnInit() {}

  ngAfterViewInit() {
    //Organization chart starts
    /* Highcharts.chart(this.barChartContainer.nativeElement, {
      // Created pie chart using Highchart
      chart: {
        type: "column"
      },

      xAxis: {
        type: "category"
      },

      series: [
        {
          name: "TOTAL chart",
          data: [
            {
              name: "Planned",
              y: 30,
              drilldown: "planned"
            }
          ]
        }
      ],
      //Drill Downs
      drilldown: {
        series: [
          {
            name: "Planned Drill Down",
            id: "planned",
            data: [["plan A", 55.03], ["plan B", 15.83]]
          }
        ]
      }
    }); */

    Highcharts.chart(this.orgChartContainer.nativeElement, {
      chart: {
        height: 600,
        inverted: true
      },

      title: {
        text: "Highcharts Org Chart"
      },

      accessibility: {
        point: {
          descriptionFormatter: function(point) {
            var nodeName = point.toNode.name,
              nodeId = point.toNode.id,
              nodeDesc =
                nodeName === nodeId ? nodeName : nodeName + ", " + nodeId,
              parentDesc = point.fromNode.id;
            return (
              point.index + ". " + nodeDesc + ", reports to " + parentDesc + "."
            );
          }
        }
      },

      series: [
        {
          type: "organization",
          name: "Highsoft",
          keys: ["from", "to"],
          data: [
            ["Shareholders", "Board"],
            ["Board", "CEO"],
            ["CEO", "CTO"],
            ["CEO", "CPO"],
            ["CEO", "CSO"],
            ["CEO", "CMO"],
            ["CEO", "HR"],
            ["CTO", "Product"],
            ["CTO", "Web"],
            ["CSO", "Sales"],
            ["CMO", "Market"]
          ],
          levels: [
            {
              level: 0,
              color: "silver",
              dataLabels: {
                color: "black"
              },
              height: 25
            },
            {
              level: 1,
              color: "silver",
              dataLabels: {
                color: "black"
              },
              height: 25
            },
            {
              level: 2,
              color: "#980104"
            },
            {
              level: 4,
              color: "#359154"
            }
          ],
          nodes: [
            {
              id: "Shareholders"
            },
            {
              id: "Board"
            },
            {
              id: "CEO",
              title: "CEO",
              name: "Grethe Hjetland",
              image:
                "https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12132317/Grethe.jpg"
            },
            {
              id: "HR",
              title: "HR/CFO",
              name: "Anne Jorunn Fjærestad",
              color: "#007ad0",
              image:
                "https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12132314/AnneJorunn.jpg",
              column: 3,
              offset: "75%"
            },
            {
              id: "CTO",
              title: "CTO",
              name: "Christer Vasseng",
              column: 4,
              image:
                "https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12140620/Christer.jpg",
              layout: "hanging"
            },
            {
              id: "CPO",
              title: "CPO",
              name: "Torstein Hønsi",
              column: 4,
              image:
                "https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12131849/Torstein1.jpg"
            },
            {
              id: "CSO",
              title: "CSO",
              name: "Anita Nesse",
              column: 4,
              image:
                "https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12132313/Anita.jpg",
              layout: "hanging"
            },
            {
              id: "CMO",
              title: "CMO",
              name: "Vidar Brekke",
              column: 4,
              image:
                "https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/13105551/Vidar.jpg",
              layout: "hanging"
            },
            {
              id: "Product",
              name: "Product developers"
            },
            {
              id: "Web",
              name: "Web devs, sys admin"
            },
            {
              id: "Sales",
              name: "Sales team"
            },
            {
              id: "Market",
              name: "Marketing team"
            }
          ],
          colorByPoint: false,
          color: "#007ad0",
          dataLabels: {
            color: "white"
          },
          borderColor: "white",
          nodeWidth: 65
        }
      ],
      tooltip: {
        outside: true
      },
      exporting: {
        allowHTML: true,
        sourceWidth: 800,
        sourceHeight: 600
      }
    });

    //Organization chart ends
  }
}

在你的模板中:

<div #orgChartContainer></div>

---

Here's a Sample Demo for your ref.