Angular 角度2 ng2图表甜甜圈添加文本
我使用的是基于chart.js的。我试图添加文本在甜甜圈图表的中间,但我不能设置文字或登记插件。有人能帮忙吗?到目前为止,我在javascript中找到了一些不完整的答案,但我正在努力实现chart.js的angular 2和typescript 我的模板文件:Angular 角度2 ng2图表甜甜圈添加文本,angular,chart.js,ng2-charts,Angular,Chart.js,Ng2 Charts,我使用的是基于chart.js的。我试图添加文本在甜甜圈图表的中间,但我不能设置文字或登记插件。有人能帮忙吗?到目前为止,我在javascript中找到了一些不完整的答案,但我正在努力实现chart.js的angular 2和typescript 我的模板文件: <div style="display: block" class="donut"> <canvas #mycanvas baseChart [data]="doughnutChartD
<div style="display: block" class="donut">
<canvas #mycanvas baseChart
[data]="doughnutChartData"
[labels]="doughnutChartLabels"
[chartType]="doughnutChartType"
[options]="doughnutChartOptions"
[datasets]="doughnutChartDatasets"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
<script>
Chart.pluginService.register({
afterDraw: function (chart) {
if (chart.config.options.elements.center) {
var helpers = Chart.helpers;
var centerX = (chart.chartArea.left + chart.chartArea.right) / 2;
var centerY = (chart.chartArea.top + chart.chartArea.bottom) / 2;
var ctx = chart.chart.ctx;
ctx.save();
var fontSize = helpers.getValueOrDefault(chart.config.options.elements.center.fontSize, Chart.defaults.global.defaultFontSize);
var fontStyle = helpers.getValueOrDefault(chart.config.options.elements.center.fontStyle, Chart.defaults.global.defaultFontStyle);
var fontFamily = helpers.getValueOrDefault(chart.config.options.elements.center.fontFamily, Chart.defaults.global.defaultFontFamily);
var font = helpers.fontString(fontSize, fontStyle, fontFamily);
ctx.font = font;
ctx.fillStyle = helpers.getValueOrDefault(chart.config.options.elements.center.fontColor, Chart.defaults.global.defaultFontColor);
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(chart.config.options.elements.center.text, centerX, centerY);
ctx.restore();
}
},
})
</script>
将您的代码复制到Plunker,工作正常: 普朗克:
我认为以这种方式添加脚本将不起作用,因为angular会对其进行清理。尝试将脚本添加到
页面上的chart.js脚本之后,或者最好添加到它自己的文件中。您需要将模板中的脚本移动到component.ts中。也许把它们放在ngAfterViewInit()中。谢谢!!现在可以了!正如您所说,我必须在ngAfterViewInit()中复制它。是的,谢谢,我在ngAfterViewInit中复制了它,正如@wannaStream所说,并且它是有效的。请提供一个plunker的参考,其中显示了解决方案。上面的plunker只提供了一个饼图,如何在ng2甜甜圈的文本中传递webapi响应,如动态数字99,有什么想法吗?
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
colors = {
indigo: '#14143e',
pink: '#fd1c49',
orange: '#ff6e00',
yellow: '#f0c800',
mint: '#00efab',
cyan: '#05d1ff',
purple: '#841386',
white: '#fff'
};
// Doughnut
public doughnutChartLabels:string[] = ['Drive Score', ''];
public doughnutChartData:number[] = [85, 15];
public doughnutChartType:string = 'doughnut';
public doughnutChartOptions: any = {
cutoutPercentage: 80,
elements: {
center: {
text: 'Hello',
fontColor: '#000',
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
fontSize: 24,
fontStyle: 'normal'
}
}
};
public doughnutChartDatasets: any[] = [
{
data: [300, 50, 100],
options: this.doughnutChartOptions,
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}];
// events
public chartClicked(e:any):void {
console.log(e);
}
public chartHovered(e:any):void {
console.log(e);
}
constructor(){
}
}