在React中使用ChartJS动态添加多x轴时刻度无法分离问题咨询

问题原因 #

你遇到的双x轴刻度无法分离的核心原因有两个：

• 你没有在图表的options配置中显式定义两个ID为Bx、Cx的独立x轴，仅给数据集指定xAxisID不会自动生成独立轴，ChartJS会默认将所有数据集绑定到同一个默认x轴，自然不会出现独立刻度
• 你默认使用的是category类型的x轴，该类型轴会全局复用顶层labels数组的内容，天然不支持多轴独立标签，需要换成linear数值类型的x轴才能实现两个轴刻度完全独立

修复方案 #

1. 补充图表scales配置

在Line组件的options中新增scales字段，明确定义两个独立的x轴、两个y轴的配置，示例如下：

options={{
  title: {
    display: true,
    text: 'Average Rainfall per month',
    fontSize: 20
  },
  legend: {
    display: true,
    position: 'right'
  },
  maintainAspectRatio: false,
  responsive: true,
  // 新增轴配置
  scales: {
    Bx: {
      type: 'linear',
      position: 'bottom', // 放在底部
      min: 0,
      max: 9, // 刻度范围0-9
      display: true
    },
    Cx: {
      type: 'linear',
      position: 'top', // 放在顶部和底部x轴区分
      min: 0,
      max: 16, // 刻度范围0-16
      display: true,
      grid: {
        drawOnChartArea: false // 避免两个x轴的网格线重叠
      }
    },
    By: {
      type: 'linear',
      position: 'left',
      display: true
    },
    Cy: {
      type: 'linear',
      position: 'right',
      display: true,
      grid: {
        drawOnChartArea: false
      }
    }
  }
}}

2. 修改数据集的data结构

linear类型x轴需要数据集提供{x, y}结构的坐标值，不能仅传y值，修改两个数据集添加函数：

// 对应x轴Bx（0-9）的数据集
function adddataset(){
  let lineChart = Chart.instances[0];
  const data=lineChart.data;
  const yValues = [65, 59, 80, 81, 56, 55, 40];
  // 构造{x,y}结构，x从0到6，落在0-9的范围内
  const formattedData = yValues.map((val, idx) => ({x: idx, y: val}))
  const newDataset = {
    label: 'Dataset ' + (data.datasets.length + 1),
    backgroundColor: 'rgba(109, 24, 172, 1)',
    borderColor: 'rgba(0, 250, 255, 1)',
    data: formattedData,
    yAxisID: 'By',
    xAxisID: 'Bx',
  };
  lineChart.data.datasets.push(newDataset);
  lineChart.update();
}

// 对应x轴Cx（0-16）的数据集
function adddataset1(){
  let lineChart = Chart.instances[0];
  const data=lineChart.data;
  const yValues = [100,30,50,60,20,30,60,100,34,3456,6,5,4,3,5,545];
  // 构造{x,y}结构，x从0到15，落在0-16的范围内
  const formattedData = yValues.map((val, idx) => ({x: idx, y: val}))
  const newDataset = {
    label: 'Dataset ' + (data.datasets.length + 1),
    backgroundColor: 'rgba(109, 24, 172, 1)',
    borderColor: 'rgba(109, 24, 172, 1)',
    data: formattedData,
    yAxisID: 'Cy',
    xAxisID: 'Cx',
  };
  lineChart.data.datasets.push(newDataset);
  lineChart.update();
}

额外注意 #

你初始state中定义的两个占位空数据集，如果没有实际用途可以直接删除，避免额外的渲染开销，如果需要保留请给它们补充对应的xAxisID和yAxisID属性，避免控制台报错。

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