将vasturiano / `sunbrust-chart` 与 Angular 2-9 集成答案

【问题标题】：Integrate vasturiano / `sunbrust-chart` with Angular 2-9将vasturiano / `sunbrust-chart` 与 Angular 2-9 集成
【发布时间】：2023-11-18 23:06:02
【问题描述】：

有没有办法将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

【问题讨论】：

标签： angular typescript sunburst-diagram angular9

【解决方案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>

它应该可以正常工作！

【讨论】：

谢谢，这个解决方案正在显示旭日形图！

【解决方案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>

【讨论】：

这会创建像 3 层数据这样的分层数据吗
我们怎样才能像这个例子一样将文本旋转到中心observablehq.com/@d3/sunburst
@ammadkhan 是的，将有 3 层。
@ammadkhan 有labelOrientation([angular, radial or auto])。请查看文档：github.com/vasturiano/sunburst-chart。如果这没有帮助，您可以手动操作 CSS。
非常感谢我正在调查它