[英]How to display data labels outside in pie chart with lines in ionic
I am working on charts where I want to create a pie chart same as image displayed below.我正在处理图表,我想在其中创建与下面显示的图像相同的饼图。 I got some examples using chart.js, but it is not working as the image where I want to display data labels outside chart with lines indicating the portion for data labels .
我得到了一些使用 chart.js 的例子,但它不能作为我想在图表外显示数据标签的图像,线条指示数据标签的部分。
home.ts家.ts
this.doughnutChart = new Chart(this.doughnutCanvas.nativeElement, {
type: 'doughnut',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56",
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
}
});
home.html主页.html
<ion-card>
<ion-card-header>
Doughnut Chart
</ion-card-header>
<ion-card-content>
<canvas #doughnutCanvas></canvas>
</ion-card-content>
</ion-card>
what i want it to look like我希望它看起来像什么
what it is look like using chart.js使用 chart.js 是什么样的
so can anyone help me to solve this?所以有人可以帮我解决这个问题吗?
You have to write a plugin to do it.你必须写一个插件来做到这一点。 In
afterDraw
hook, you have to iterate over Chart Elements and calculate 3 points:在
afterDraw
钩子中,您必须遍历图表元素并计算 3 个点:
Point1
, have length = radius + X (x > 0 will give a better visual) Point1
,长度 = 半径 + X(x > 0 将提供更好的视觉效果)Point2
with chart's edge (left/right) based on Point2.x
Point2
与基于Point2.x
图表边缘(左/右)连接起来创建Draw 2 lines to connect Point1 with Point2, and Point2 with Point3 will give you this chart:画 2 条线将 Point1 与 Point2 连接起来,Point2 与 Point3 将为您提供以下图表:
https://imgur.com/a/rWaV2x3 https://imgur.com/a/rWaV2x3
Sample code for chartjs 2.9.4: chartjs 2.9.4 的示例代码:
const DoughnutLabelPlugin = {
afterDraw: (chart) => {
const ctx = chart.chart.ctx;
ctx.save();
ctx.font = "10px 'Averta Std CY'";
const chartCenterPoint = {
x:
(chart.chartArea.right - chart.chartArea.left) / 2 +
chart.chartArea.left,
y:
(chart.chartArea.bottom - chart.chartArea.top) / 2 +
chart.chartArea.top
};
chart.config.data.labels.forEach((label, i) => {
const meta = chart.getDatasetMeta(0);
const arc = meta.data[i];
const dataset = chart.config.data.datasets[0];
// Prepare data to draw
// important point 1
const centerPoint = arc.getCenterPoint();
const model = arc._model;
let color = model.borderColor;
let labelColor = model.borderColor;
if (dataset.polyline && dataset.polyline.color) {
color = dataset.polyline.color;
}
if (dataset.polyline && dataset.polyline.labelColor) {
labelColor = dataset.polyline.labelColor;
}
const angle = Math.atan2(
centerPoint.y - chartCenterPoint.y,
centerPoint.x - chartCenterPoint.x
);
// important point 2
const point2X =
chartCenterPoint.x + Math.cos(angle) * (model.outerRadius + 20);
let point2Y =
chartCenterPoint.y + Math.sin(angle) * (model.outerRadius + 20);
let value = dataset.data[i];
if (dataset.polyline && dataset.polyline.formatter) {
value = dataset.polyline.formatter(value);
}
let edgePointX = point2X < chartCenterPoint.x ? 10 : chart.width - 10;
//DRAW CODE
// first line: connect between arc's center point and outside point
ctx.strokeStyle = color;
ctx.beginPath();
ctx.moveTo(centerPoint.x, centerPoint.y);
ctx.lineTo(point2X, point2Y);
ctx.stroke();
// second line: connect between outside point and chart's edge
ctx.beginPath();
ctx.moveTo(point2X, point2Y);
ctx.lineTo(edgePointX, point2Y);
ctx.stroke();
//fill custom label
const labelAlignStyle =
edgePointX < chartCenterPoint.x ? "left" : "right";
const labelX = edgePointX;
const labelY = point2Y;
ctx.textAlign = labelAlignStyle;
ctx.textBaseline = "bottom";
ctx.fillStyle = labelColor;
ctx.fillText(value, labelX, labelY);
});
ctx.restore();
}
}
Demo: https://codesandbox.io/s/wispy-bash-nt7ty?file=/src/Chart.js演示: https : //codesandbox.io/s/wispy-bash-nt7ty?file=/ src/ Chart.js
For draw a line with hand-drawn style, I recommend to use https://roughjs.com对于手绘风格的线条,我建议使用https://roughjs.com
For having this outlet you must add the following plugin to your project:要拥有此插座,您必须将以下插件添加到您的项目中:
chartjs-plugin-piechart-outlabels chartjs-plugin-piechart-outlabels
The problem with the style is type: 'doughnut'
.样式的问题是
type: 'doughnut'
。 This will display a doughnut style chart, if you want the pie style you should use type: 'pie'
这将显示一个甜甜圈样式图表,如果你想要饼图样式,你应该使用
type: 'pie'
For more info: http://www.chartjs.org/docs/latest/charts/doughnut.html更多信息: http : //www.chartjs.org/docs/latest/charts/doughnut.html
Also, about the data labels, I don't think that style is currently supported by chartJs, you can try to customize it: http://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-configuration另外,关于数据标签,我认为chartJs目前不支持该样式,您可以尝试自定义它: http : //www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-configuration
Or try some options.. https://github.com/chartjs/chartjs-plugin-datalabels或者尝试一些选项.. https://github.com/chartjs/chartjs-plugin-datalabels
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.