文章/答案/技术大牛

发布

社区首页 >问答首页 >react-chartjs 2中响应式图例字体大小

问react-chartjs 2中响应式图例字体大小
EN

Stack Overflow用户

提问于 2021-03-25 16:06:22

回答 1查看 1.2K关注 0票数 0

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

react-chartjs-2

chart.js

pie-chart

react-chartjs

legend-properties

回答 1

Stack Overflow用户

发布于 2021-03-25 16:32:08

您可以将fontSize对象设置为ternery操作符，该操作符检查fontSize (或其他内容)以查看您是否在移动设备上，并根据它返回正确的widts

如果因为屏幕尺寸变化而想要实时更新它，可以通过在resizeEvent listner中改变图表选项本身来实现

var options = {
  type: 'line',
  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: {
    legend: {
      labels: {
        fontSize: window.innerWidth > 350 ? 20 : 10
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          reverse: false
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
const chart = new Chart(ctx, options);

window.addEventListener('resize', () => {
  if (window.innerWidth < 350) {
    chart.options.legend.labels.fontSize = 10;
  } else {
    chart.options.legend.labels.fontSize = 20
  }
});

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66795383

复制

相似问题

问react-chartjs 2中响应式图例字体大小
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问react-chartjs 2中响应式图例字体大小EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问react-chartjs 2中响应式图例字体大小
EN