使用Chart.js和Angular2，Ionic2的Doughnut图表中的文本

Question

如何使用图表.js和Angular2在甜甜圈图中添加文本标签？ 我看到了有关此主题的一些答案，但由于我正在使用Ionic2应用程序，因此它们都不适合我。 这是我的简化代码：

import { Chart } from 'chart.js';
@ViewChild('doughnutCanvas') doughnutCanvas;
ionViewDidEnter() {
this.doughnutChart = new Chart(this.doughnutCanvas.nativeElement, {
type: 'doughnut',
data: {
labels: this.titles,
datasets: [{
label: '# of Work',
data: this.times,
backgroundColor: [
'rgba(255, 99, 132, 0.5)',
'rgba(54, 162, 235, 0.5)'
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB"
]
}]
},
options: {
responsive: true,
legend: {
display: false
}
}
});
}

Answer 1

这可以通过在生成图表之前创建/注册插件来实现，您可以通过以下方式创建插件......

Chart.plugins.register({
beforeDraw: function(chart) {
var data = chart.data.datasets[0].data;
var sum = data.reduce(function(a, b) {
return a + b;
}, 0);
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.restore();
var fontSize = (height / 10).toFixed(2);
ctx.font = fontSize + "px Arial";
ctx.textBaseline = "middle";
var text = sum,
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
});

ᴅᴇᴍᴏ

// register plugin
Chart.plugins.register({
beforeDraw: function(chart) {
var data = chart.data.datasets[0].data;
var sum = data.reduce(function(a, b) {
return a + b;
}, 0);
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.restore();
var fontSize = (height / 10).toFixed(2);
ctx.font = fontSize + "px Arial";
ctx.textBaseline = "middle";
var text = sum,
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
});
// generate chart
var ctx = document.getElementById('canvas').getContext('2d');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["Red", "Blue", "Yellow"],
datasets: [{
data: [300, 50, 100],
backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
hoverBackgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"]
}]
},
options: {
responsive: false,
legend: {
display: false
}
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>

Answer 2

如果你们试图添加图例。 您应该使用

height = (chart.chartArea.top + chart.chartArea.bottom) / 2
textY = height;

使用图表区域更正确。 否则，您的文本将忽略图例的高度并位于错误的位置。

Answer 3

对于任何使用ng2-charts^2.4.2"的人来说，内联插件的注册都可以通过baseChart指令的输入属性[plugins]来完成。

首先，您必须定义一个plugins属性持有和插件数组。(您也可以在那里注册您的官方插件plugins = [ChartDataLabels, {/*inline plugin*/}])

为了在圆环图中正确放置标签，您必须考虑图例的位置，该位置可能在上方、下方或左侧或右侧。所以我调整了@GRUNT和@ginagigo123答案，成为一个基于以下计算的最终答案。

let textX = Math.round(((chart.chartArea.left + chart.chartArea.right) - ctx.measureText(text).width) / 2),
let textY = Math.round((chart.chartArea.top + chart.chartArea.bottom) / 2);

组合.ts

@ViewChild(BaseChartDirective, { static: true })
chartNgWrapper: BaseChartDirective;
plugins = [
{
beforeDraw: function (chart: any) {
let data = chart.data.datasets[0].data;
let sum = (data as number[]).reduce(function (a, b) {
return a + b;
}, 0);
let width = chart.chartArea.left + chart.chartArea.right,
height = chart.chartArea.top + chart.chartArea.bottom,
ctx = chart.chart.ctx;
ctx.restore();
let fontSize = (height / 10).toFixed(2);
ctx.font = fontSize + 'px Arial';
ctx.textBaseline = 'middle';
let text = sum,
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
},
},
];

如果您正在制作可以切换语言写作模式的应用程序，则必须从某处获取当前rtl(从右到左)的值(我的值在图例中定义)并基于它进行加减：

let textX = chart.legend.options.rtl
? Math.round((width + ctx.measureText(text).width) / 2)
: Math.round((width - ctx.measureText(text).width) / 2),

如果你通过html元素的dir属性(<app-root dir="ltr">)操纵书写方向，你也可以从chart.ctx.direction获取当前的语言写作模式，在这种情况下它返回'rtl'或'ltr'字符串

组件.html

<canvas
baseChart
#chart
[datasets]="doughnutChartData"
[chartType]="doughnutChartType"
[labels]="doughnutChartLabels"
[options]="options"
[plugins]="plugins"
>
</canvas>