Интегрируйте vasturiano / sunbrust-chart с Angular 2-9 - PullRequest
Новая
       15

Интегрируйте vasturiano / sunbrust-chart с Angular 2-9

1 голос
/ 05 марта 2020

Есть ли способ интегрировать карту Вастуриано / Санберст с 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

Ответы [ 2 ]

1 голос
/ 05 марта 2020

Попробуйте так:

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>

он должен работать правильно!

0 голосов
/ 05 марта 2020

Здесь у меня есть рабочее решение в стиле 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>
...