将 vasturiano / `sunburst-chart` 与 Angular 集成 2-9

Question

有没有办法将 vasturiano/sunburst-chart 与 Angular 2 - 9 结合起来？我正在尝试这个，但没有用。

import { Component, OnInit } from '@angular/core';
import Sunburst from 'sunburst-chart';
import { sbdata } from '../chart-options/sunburst-mockdata';

@Component({
  selector: 'app-sunburst',
  templateUrl: './sunburst.component.html',
  styleUrls: ['./sunburst.component.scss']
})
export class SunburstComponent implements OnInit {
  constructor() {}

  ngOnInit() {
    const myChart: Sunburst = Sunburst();
    myChart.data(sbdata)('sbChart');
  }
}

和 sunburst.component.html:

<div class="card" id="sbChart"></div>

以下是 sunburst-chart 的来源：https://github.com/vasturiano/sunburst-chart

Answer 1

这样试试：

index.html:

...

  </head>
  <body>
    <app-root></app-root>
    <script src="https://unpkg.com/sunburst-chart@1.8.0/dist/sunburst-chart.min.js"></script>
  </body>
</html>

打开您的 app.component.ts 并添加以下代码：

app.component.ts:

import { Component } from "@angular/core";
declare var Sunburst: any;
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {
  title = "my-app";
  data: any;
  ngOnInit() {
    this.data = {
      name: "main",
      color: "magenta",
      children: [
        {
          name: "a",
          color: "yellow",
          size: 1
        },
        {
          name: "b",
          color: "red",
          children: [
            {
              name: "ba",
              color: "orange",
              size: 1
            },
            {
              name: "bb",
              color: "blue",
              children: [
                {
                  name: "bba",
                  color: "green",
                  size: 1
                },
                {
                  name: "bbb",
                  color: "pink",
                  size: 1
                }
              ]
            }
          ]
        }
      ]
    };

    Sunburst()
      .data(this.data)
      .size("size")
      .color("color")(document.getElementById("chart"));
  }
}

您的 app.component.html 中的下一个：

<div id="chart"></div>

它应该可以正常工作！

Answer 2

这里我有一个 Angular 9 样式的工作解决方案。

安装："sunburst-chart": "^1.8.0" 如果您还需要 "d3": "^5.15.0"。

import { Component, OnInit } from '@angular/core';
import Sunburst from 'sunburst-chart';
import * as d3 from 'd3';

@Component({
  selector: 'app-sunburst',
  templateUrl: './sunburst.component.html',
  styleUrls: ['./sunburst.component.scss']
})
export class SunburstComponent implements OnInit {
  loading: boolean;

  @ViewChild('sbChart', { static: true }) sbChartEl: ElementRef;

  constructor() {}

  ngOnInit() {
    this.loading = true;
    const color = d3.scaleOrdinal(d3.schemePaired);
    const sbdata = {
      name: 'main',
      color: 'magenta',
      children: [
        {
          name: 'a',
          size: 1
        },
        {
          name: 'b',
          children: [
            {
              name: 'ba',
              size: 1
            },
            {
              name: 'bb',
              children: [
                {
                  name: 'bba',
                  size: 1
                },
                {
                  name: 'bbb',
                  size: 1
                }
              ]
            }
          ]
        }
      ]
    };

    Sunburst()
      .data(sbdata)
      .size('size')
      .height(500)
      .showLabels(false)
      .tooltipContent((d, node) => `Size: <i>${node.value}</i>`)
      //.color(d => color(d.name))(document.getElementById('sbChart'));
      .color(d => color(d.name))(this.sbChartEl.nativeElement);

    this.loading = false;
  }
}

sunburst.component.html 文件：

<div [hidden]="loading">
  <div id="sbChart" #sbChart></div>
</div>

将 vasturiano / `sunburst-chart` 与 Angular 集成 2-9

Integrate vasturiano / `sunbrust-chart` with Angular 2-9

angular

typescript

sunburst-diagram

angular9