我曾尝试使用react-chartjs 2制作一个饼图,它在桌面视图中工作正常,但在移动的视图中图例没有响应,它占用了很多空间,因此饼图的大小变得非常小。
我代码:
function Chart(props: any) {
const option = {
tooltips: {enter image description here
callbacks: {
label: function (tooltipItem: any, data: any) {
var dataset = data.datasets[tooltipItem.datasetIndex];
var meta = dataset._meta[Object.keys(dataset._meta)[0]];
var total = meta.total;
var currentValue = dataset.data[tooltipItem.index];
var percentage = parseFloat(
((currentValue / total) * 100).toFixed(1)
);
return currentValue + " (" + percentage + "%)";
},
title: function (tooltipItem: any, data: any) {
return data.labels[tooltipItem[0].index];
},
},
},
legend: {
display: true,
labels: {
fontSize: 12,
},
position: "right",
},
};
return (
<div className="chart">
<Pie data={props.ChartData} options={option} />
</div>
);
2条答案
按热度按时间vdgimpew1#
您可以将fontSize对象设置为三元运算符,该运算符检查widts(或其他内容)以查看您是否使用移动的设备,并根据它给予正确的fontSize
如果由于屏幕大小更改而需要实时更新,可以通过在resizeEvent列表器中修改图表选项本身来实现
第一个
cbeh67ev2#
以下是具有响应图例字体大小的方法(也说明了here)