我正在用chartjs在react项目中创建一个饼图。但我无法在不同的分段上显示任何值。我尝试过不同的插件，但现在都不支持了。
我对任何想法都持开放态度。这就是我目前绘制图表的方式：
<Pie
data={chartData}
options={{
responsive: true,
plugins: {
legend: {
labels: {
color: "white",
font : {
size: 16
},
}
}
},
}}
/>
您可以使用datalabels插件的测试版，安装方式如下：
YARN:
yarn add chartjs-plugin-datalabels@next
NPM:
npm i chartjs-plugin-datalabels@next
chart.js v3:的实时示例
Chart.register(ChartDataLabels);
var options = {
type: 'pie',
data: {
labels: ['orange', 'blue', 'gray'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3],
borderWidth: 1,
backgroundColor: ['orange', 'blue', 'gray']
}]
},
options: {
plugins: {
datalabels: {
backgroundColor: function(context) {
return context.dataset.backgroundColor;
},
borderColor: 'white',
borderRadius: 25,
borderWidth: 3,
color: 'white',
font: {
weight: 'bold'
},
padding: 6,
}
}
}
}
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.3.2/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0-rc"></script>
</body>