如何使用react-chartjs-2实现30天缺勤数据图表的移动端响应式适配

• 第一步：补充响应式核心配置项
  react-chartjs-2 默认支持响应式适配，你需要在原有options中补充控制响应式的属性，同时可以针对移动端30天日期标签拥挤的问题添加x轴展示优化规则：

this.state = {
  loadFirst: true,
  loadData: false,
  filterYear: moment().format('YYYY'),
  filterMonth: moment().format('MM'),
  filtered: {
    year: moment().format('YYYY'),
    month: moment().format('MM')
  },
  data: {},
  options: {
    // 新增响应式配置
    responsive: true,
    // 关闭固定宽高比，可跟随外层容器自适应，移动端适配更灵活
    maintainAspectRatio: false,
    scales: {
      yAxes: [
        {
          stacked: true,
          ticks: {
            beginAtZero: true
          }
        }
      ],
      xAxes: [
        {
          stacked: true,
          // 新增x轴标签适配，避免30天日期标签重叠
          ticks: {
            autoSkip: true,
            maxRotation: 45,
            minRotation: 45
          }
        }
      ]
    }
  }
}

• 第二步：给图表组件添加自适应外层容器
  你需要在外层包裹一个指定宽高范围的容器，控制图表渲染边界，避免移动端溢出：

<div style={{width: '100%', height: '400px'}}>
  <Bar data={data} options={options} />
</div>

如果需要不同屏幕尺寸适配不同高度，可结合CSS媒体查询给外层容器设置动态height值即可。

• 高版本适配说明
  如果你使用的是v4以上版本的react-chartjs-2（对应Chart.js v3+），scales的配置语法需要调整为对象写法，原数组写法不再生效：

scales: {
  y: {
    stacked: true,
    ticks: {
      beginAtZero: true
    }
  },
  x: {
    stacked: true,
    ticks: {
      autoSkip: true,
      maxRotation: 45,
      minRotation: 45
    }
  }
}

内容的提问来源于stack exchange，提问作者Fraza Aditya Wiguna