如何为react-chartjs-2 v4.0.0图表配置多个X轴标签

问题根因 #

你使用的Chart.js v3.x版本废弃了v2版本的options.scales.xAxes/yAxes数组写法，你当前套用的是旧版本配置语法，该问题和react-chartjs-2封装无关，react-chartjs-2的配置规则完全对齐你引入的原生Chart.js版本。

需要修改的核心配置点 #

• 移除xAxes、yAxes数组，将每个坐标轴直接作为scales的属性，属性名即为轴id，同时给x轴添加axis: 'x'属性，y轴添加axis: 'y'属性
• 原gridLines配置项在v3中已更名为grid

修改后可运行的完整代码 #

import React from 'react'
import { Bar } from 'react-chartjs-2';
import 'chart.js/auto';

const TaskProgress3 = () => {
    const data = {
      labels: ["January;2015", "February;2015", "March;2015", "January;2016", "February;2016", "March;2016"],
      datasets: [{
        id: 1,
        label: '# of Votes',
        xAxisID:'xAxis1',
        data: [12, 19, 3, 5, 2, 3]
      }]
    };

    const options = {
      scales:{
        xAxis1: {
          id:'xAxis1',
          type: "category",
          axis: 'x',
          ticks:{
            callback:function(label){
              var month = label.split(";")[0];
              return month;
            }
          }
        },
        xAxis2: {
          id:'xAxis2',
          type: "category",
          axis: 'x',
          grid: {
            drawOnChartArea: false,
          },
          ticks:{
            callback:function(label){
              var month = label.split(";")[0];
              var year = label.split(";")[1];
              if(month === "February"){
                return year;
              }else{
                return "";
              }
            }
          }
        },
        y: {
          ticks:{
            beginAtZero:true
          }
        }
      }
    };

    return (
        <>
        <div>Bar Chart</div>
        <Bar
          datasetIdKey='id'
          data={data}
          options={options}
          height="100px"
          width="600px"
          />
        </>
    )
}

export default TaskProgress3;

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