小屏幕80%缩放致React Chart.js饼图标签交互失效求助

我们为小屏幕设置了80%的页面缩放规则，导致Chart.js饼图出现异常——大屏幕100%缩放状态下，可点击图表标签进行筛选操作；切换至小屏幕80%缩放状态时，无法选中标签完成筛选。相关代码如下：

<Pie
  data={{
    labels: ['Bug', 'Task', 'Sub-task', 'Story', 'Epic'],
    datasets: [
      {
        label: 'No. of Issues',
        data: [
          findOneTeamIssueTypeCount.data.findOneTeamIssueTypeCount
            .bug,
          findOneTeamIssueTypeCount.data.findOneTeamIssueTypeCount
            .task,
          findOneTeamIssueTypeCount.data.findOneTeamIssueTypeCount
            .subtask,
          findOneTeamIssueTypeCount.data.findOneTeamIssueTypeCount
            .story,
          findOneTeamIssueTypeCount.data.findOneTeamIssueTypeCount
            .epic,
        ],
        backgroundColor: [
          softRed,
          softYellow,
          'pink',
          softBlue,
          softGreen,
        ],
        borderWidth: 1,
      },
    ],
  }}
  options={{
    responsive: true,
    plugins: {
      legend: {
        position: 'bottom',
      },
    },
  }}
/>

问题原因 #

页面整体缩放会改变浏览器的像素比例，Chart.js的图例点击区域坐标计算依赖原生页面尺寸，自定义缩放后会出现坐标偏差，导致点击事件无法被正确触发。

解决方案 #

1. 替换页面缩放为响应式布局（推荐） #

直接缩放整个页面容易引发各类交互组件的适配问题，建议用媒体查询调整元素尺寸、字体等，实现小屏幕适配：

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .chart-container {
    width: 90%;
    margin: 0 auto;
  }
}

2. 强制Chart.js重新计算交互区域 #

通过ref获取图表实例，监听窗口resize事件（包括缩放触发的resize），手动调用resize()方法让Chart.js重新计算布局：

import { useRef, useEffect } from 'react';
import { Pie } from 'react-chartjs-2';

const PieChart = () => {
  const chartRef = useRef(null);

  useEffect(() => {
    const handleResize = () => {
      chartRef.current?.resize();
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <Pie
      ref={chartRef}
      data={{/* 原有data配置 */}}
      options={{
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            position: 'bottom',
          },
        },
      }}
    />
  );
};

3. 扩大图例点击区域 #

调整图例配置，通过增加内边距或关闭精确相交检测，提升点击容错率：

options={{
  responsive: true,
  plugins: {
    legend: {
      position: 'bottom',
      intersect: false, // 鼠标经过图例区域即触发交互，无需精确点击
      labels: {
        padding: 15, // 增加标签内边距，扩大可点击范围
      },
    },
  },
}}

内容的提问来源于stack exchange，提问作者babukuinha