以2-9角整合万维亚诺/太阳图
以2-9角整合万维亚诺/太阳图
提问于 2020-03-05 08:39:05
是否有一种方法可以将巨大的太阳爆发图和角度为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
Stack Overflow用户
回答已采纳
发布于 2020-03-05 12:01:51
这里我有一个角度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>Stack Overflow用户
发布于 2020-03-05 09:12:22
就像这样：
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>它应该能正常工作！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60541172
复制相关文章
相似问题
腾讯云开发者
