[英]How to display data labels outside in pie chart with lines in ionic
我正在处理图表,我想在其中创建与下面显示的图像相同的饼图。 我得到了一些使用 chart.js 的例子,但它不能作为我想在图表外显示数据标签的图像,线条指示数据标签的部分。
家.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"
]
}]
}
});
主页.html
<ion-card>
<ion-card-header>
Doughnut Chart
</ion-card-header>
<ion-card-content>
<canvas #doughnutCanvas></canvas>
</ion-card-content>
</ion-card>
我希望它看起来像什么
使用 chart.js 是什么样的
所以有人可以帮我解决这个问题吗?
你必须写一个插件来做到这一点。 在afterDraw
钩子中,您必须遍历图表元素并计算 3 个点:
Point1
,长度 = 半径 + X(x > 0 将提供更好的视觉效果)Point2
与基于Point2.x
图表边缘(左/右)连接起来创建画 2 条线将 Point1 与 Point2 连接起来,Point2 与 Point3 将为您提供以下图表:
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();
}
}
演示: https : //codesandbox.io/s/wispy-bash-nt7ty?file=/ src/ Chart.js
对于手绘风格的线条,我建议使用https://roughjs.com
样式的问题是type: 'doughnut'
。 这将显示一个甜甜圈样式图表,如果你想要饼图样式,你应该使用type: 'pie'
更多信息: http : //www.chartjs.org/docs/latest/charts/doughnut.html
另外,关于数据标签,我认为chartJs目前不支持该样式,您可以尝试自定义它: http : //www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-configuration
或者尝试一些选项.. https://github.com/chartjs/chartjs-plugin-datalabels
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.