这是我当前的环形图,我想在弧本身上显示每个弧的值。
这是图表的配置。
const genderConfig={
plugins: {
title: {
display: true,
text: "GENDER",
font: {
size: 20,
},
},
legend: {
labels: {
boxHeight: 20,
boxWidth: 25,
},
position: "bottom",
},
},
}
附言:我知道有一个非常类似的问题,我已经尝试了该线程中提到的解决方案,但我认为该解决方案在当前版本的Chart.js中已经不存在了。
您可以使用chart.js datalabels插件,vor V3他们目前有一个候选版本,根据他们的这个问题,在正式发布之前,有一个问题需要解决:https://github.com/chartjs/chartjs-plugin-datalabels/discussions/213
V3示例:
Chart.register(ChartDataLabels)
var options = {
type: 'pie',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.1/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0-rc/dist/chartjs-plugin-datalabels.min.js"></script>
</body>