我正在使用React,TypeScript和react-chartjs-2。我需要为我的饼图创建一个自定义标签,显示标签名称,数据量和百分比。我希望它看起来像这样:
橙子
10 / 50%
香蕉
5 / 25%
草莓
5 / 25%
这样标签名称在第一行,数量和百分比在第二行。标签颜色将在它旁边。目前我的代码只显示标签名称和颜色,我不知道如何添加数量和百分比。
这是我现在所拥有的
const [data, setData] = useState<ChartData<'pie'>>();
const [options, setOptions] = useState<ChartOptions<'pie'>>();
// Data for the pie chart (comes from a form)
const foods = [
{ value: field1, label: 'Orange' },
{ value: field2, label: 'Banana' },
{ value: field3, label: 'Strawberry' },
];
// Pie chart code here
function PieData() {
setData({
labels: foods.map(food => food.label),
datasets: [
{
label: 'Foods',
data: foods.map(food => food.value),
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
],
borderWidth: 1,
},
],
})
setOptions({
responsive: true,
plugins: {
legend: {
position: 'right',
rtl : true,
labels: {
usePointStyle: true,
pointStyle: 'circle',
}
},
},
});
}
在这里,我返回饼图:
<Pie id="pieChart" data={data} options={options}/>
所以我假设我必须编辑选项,但我真的不知道如何编辑。
1条答案
按热度按时间ybzsozfc1#
您应该使用generatedlabels选项。
下面是要使用的图例配置: