如何在Chart.js中将X轴标签设置为3-14之间的整数？

我正在开发一个图表，通过读取.csv文件中的数据，展示四种表面类型的发射率（emisivities）在3.660至14.559波长区间的变化情况。源数据示例（共531条观测值）：

x1,x2,y_oakface,y_clybrkcm,y_distd_wn,y_sndpgaz1
3.66027,2732.04,0.965892,0.531653,0.974703,0.710034
3.66544,2728.18,0.965664,0.525966,0.974765,0.703811
3.67063,2724.32,0.968696,0.527477,0.974827,0.709377
...
14.397,694.587,0.975169,0.976188,0.960436,0.982283
14.4775,690.728,0.974855,0.975476,0.959794,0.984235
14.5588,686.869,0.973462,0.977953,0.959163,0.981849

我已通过将x1列的值作为标签实现了图表绘制，现在希望将X轴标签显示为3-14之间的整数，尝试过调整刻度配置和手动定义X轴，但都无效；移除标签后折线会消失。以下是我的代码：

d3.csv("data/emisdata2.csv").then(makeChart);

// Plot the data with Chart.js
function makeChart(emisdata) {
  var wlLabels = emisdata.map(function (d) {
    return d.x1;
  });
  var oakData = emisdata.map(function (d) {
    return d.y_oakface;
  });
  var brickData = emisdata.map(function (d) {
    return d.y_clybrkcm;
  });
  var soilData = emisdata.map(function (d) {
    return d.y_sndpgaz1;
  });
  var waterData = emisdata.map(function (d) {
    return d.y_distd_wn;
  });

  const data = {
    labels: wlLabels,

    datasets: [
      {
        label: "Oak leaf",
        data: oakData,
        borderColor: "green",
        backgroundColor: 'rgba(0, 77, 0, 0.5)',
        pointStyle: false,
      },
      {
        label: "Clay brick",
        data: brickData,
        borderColor: "red",
        backgroundColor: 'rgba(255, 0, 0, 0.5)', 
        pointStyle: false,
      },
      {
        label: "Sandy soil",
        data: soilData,
        borderColor: 'rgba(139, 69, 19, 1)',
        backgroundColor: 'rgba(139, 69, 19, 0.5)', 
        pointStyle: false,
      },
      {
        label: "Distilled water",
        data: waterData,
        borderColor: 'blue',
        backgroundColor: 'rgba(0, 0, 255, 0.5)', 
        pointStyle: false,
      }
    ]
  }
  const config =  {
    type: "line",
    data: data,
    options: {
        responsive: true,
        plugins: {
            legend: {
              position: 'top',
            },
            title: {
              display: true,
              text: 'Interactive feature 2',
            },
          },
          scales: {
            x: {
              display: true,
              title: {
                display: true,
                text: 'Wavelength (micrometer)', // X-axis label
              },
              ticks:{
                stepSize: 1,
                precision: 0,

              }
            },
            y: {
              display: true,
              title: {
                display: true,
                text: 'Emissivity', // Y-axis label
              },
              
              suggestedMax: 1,
            },
          },
      
    }
}
  var chart = new Chart("myChart", config)}

解决方案 #

问题核心是当前使用类别型X轴（依赖labels数组的标签），而stepSize等刻度配置仅对数值型X轴生效。只需重构数据格式并配置数值轴即可实现需求：

1. 重构数据为数值型格式 #

将每个数据集的data改为包含x（波长数值）和y（发射率数值）的对象数组，同时移除不需要的labels字段：

function makeChart(emisdata) {
  // 重构数据，转为数值型x/y对象
  var oakData = emisdata.map(function (d) {
    return {x: parseFloat(d.x1), y: parseFloat(d.y_oakface)};
  });
  var brickData = emisdata.map(function (d) {
    return {x: parseFloat(d.x1), y: parseFloat(d.y_clybrkcm)};
  });
  var soilData = emisdata.map(function (d) {
    return {x: parseFloat(d.x1), y: parseFloat(d.y_sndpgaz1)};
  });
  var waterData = emisdata.map(function (d) {
    return {x: parseFloat(d.x1), y: parseFloat(d.y_distd_wn)};
  });

  const data = {
    // 移除labels字段，数值轴不需要它
    datasets: [/* 原数据集数组保持不变 */]
  }
  // ...后续代码
}

2. 配置X轴为数值轴 #

在scales.x中设置type: 'linear'，并指定刻度范围和显示规则：

scales: {
  x: {
    type: 'linear', // 关键：切换为数值型轴
    display: true,
    title: {
      display: true,
      text: 'Wavelength (micrometer)',
    },
    min: 3, // X轴起始刻度
    max: 14, // X轴结束刻度
    ticks: {
      stepSize: 1, // 刻度步长为1，仅显示整数
      precision: 0,
      // 可选：强制只保留整数刻度（防止浮点刻度显示）
      // callback: function(value) {
      //   return Number.isInteger(value) ? value : '';
      // }
    }
  },
  y: { /* 原Y轴配置保持不变 */ }
}

3. 确保数据类型正确 #

通过parseFloat将csv读取的字符串转为数值，避免Chart.js无法识别数值轴。

修改完成后，X轴会自动显示3-14之间的整数刻度，折线图也会基于真实波长值正确绘制，不会出现移除标签后折线消失的问题。

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