问题
This is question related to link
I managed to add text inside donut chart but I need now horizontal line that separates text inside chart.
ngAfterViewInit() {
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+15);
ctx.fillText(chart.config.options.elements.center.text2, centerX, centerY-15);
ctx.restore();
}
},
})
}
回答1:
You can draw a horizontal line which will separate the texts inside chart, using the following code after drawing the first text ...
ctx.beginPath();
ctx.moveTo(centerX - chart.innerRadius, centerY);
ctx.lineTo(centerX + chart.innerRadius, centerY);
ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)';
ctx.stroke();
and that results in ...
Here is a working example on Plunker
来源:https://stackoverflow.com/questions/43717079/angular-2-ng2-charts-donut-add-horizontal-line