ChartJS React图表中的响应图例字体大小js 2

slhcrj9b  于 2022-11-06  发布在  Chart.js
关注(0)|答案(2)|浏览(213)

我曾尝试使用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>
  );
vdgimpew

vdgimpew1#

您可以将fontSize对象设置为三元运算符,该运算符检查widts(或其他内容)以查看您是否使用移动的设备,并根据它给予正确的fontSize
如果由于屏幕大小更改而需要实时更新,可以通过在resizeEvent列表器中修改图表选项本身来实现
第一个

cbeh67ev

cbeh67ev2#

以下是具有响应图例字体大小的方法(也说明了here

options: {
        plugins: {
            legend: {
                labels: {
                    // This more specific font property overrides the global property
                    font: {
                        size: 14
                    }
                }
            }
        }
    }

相关问题