如何在Chart.js中设置Y轴相近数值保留一位小数

用户在网站操作后发现Chart.js图表Y轴显示的数值带有过多小数位（例如200.2000000000005、200.2000000000003），需要将Y轴数值统一显示为一位小数。以下是具体解决方法：

修改方案 #

只需在Y轴的ticks配置中添加格式化回调函数，对每个刻度值进行处理。在scales.y.ticks对象中加入以下代码：

callback: function(value) {
  // 将数值格式化为一位小数，处理浮点数精度问题
  return Number(value).toFixed(1);
}

修改后的完整代码 #

const a = new Chart(canvasElement, {
  data: {
    labels: mikeFWLabelChart,
    datasets: [{
      type: 'line',
      label: 'водно количество [куб. м./сек.]',
      data: mikeFWDataChart,
      pointRadius: 1,
      borderWidth: 2,
      borderColor: '#00b3ff',
      backgroundColor: "#00b3ff",
      pointBackgroundColor: "#00b3ff",
      pointBorderColor: "rgba(255, 255, 255, 0)",
      pointHoverBackgroundColor: "#00b3ff",
      pointHoverBorderColor: "#00b3ff",
      showToolTips: false,
    }, {
      type: 'line',
      label: 'надморска височина [метри]',
      data: mike11DataChart,
      pointRadius: 1,
      borderWidth: 2,
      borderColor: '#86A3B8',
      backgroundColor: "#86A3B8",
      pointBackgroundColor: "#86A3B8",
      pointBorderColor: "rgba(255, 255, 255, 0)",
      pointHoverBackgroundColor: "#86A3B8",
      pointHoverBorderColor: "#0022ff",
      showToolTips: false,
    }, {
      type: 'line',
      label: 'предупреждение I',
      data: mikeYellowWarning,
      pointRadius: 1,
      borderWidth: 3,
      borderColor: '#eeff00',
      backgroundColor: "#eeff00",
      pointBackgroundColor: "#eeff00",
      pointBorderColor: "rgba(255, 255, 255, 0)",
      pointHoverBackgroundColor: "#eeff00",
      pointHoverBorderColor: "#eeff00",
      showToolTips: false,
    }, {
      type: 'line',
      label: 'предупреждение II',
      data: mikeOrangeWarning,
      pointRadius: 1,
      borderWidth: 3,
      borderColor: '#ff8400',
      backgroundColor: "#ff8400",
      pointBackgroundColor: "#ff8400",
      pointBorderColor: "rgba(255, 255, 255, 0)",
      pointHoverBackgroundColor: "#ff8400",
      pointHoverBorderColor: "#ff8400",
      showToolTips: false,
    }, {
      type: 'line',
      label: 'предупреждение III',
      data: mikeRedWarning,
      pointRadius: 1,
      borderWidth: 3,
      borderColor: '#ff0000',
      backgroundColor: "#ff0000",
      pointBackgroundColor: "#ff0000",
      pointBorderColor: "rgba(255, 255, 255, 0)",
      pointHoverBackgroundColor: "#ff0000",
      pointHoverBorderColor: "#ff0000",
      showToolTips: false,
    },]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      annotation: {
        annotations: [
          {
            type: "line",
            xMin: vert_line_darprog,
            xMax: vert_line_darprog,
            borderColor: "#8a9c9d",
            label: {
              backgroundColor: 'rgba(0,0,0,0)',
              color: '#8a9c9d',
              padding: 2,
              content: 'Дата на прогнозата (GMT+2)',
              enabled: true,
              display: true,
              position: 'end',
              textAlign: 'center',
              xAdjust: -9,
              rotation: 270
            }
          },
          {
            type: "line",
            xMin: vert_line_GMT2,
            xMax: vert_line_GMT2,
            borderColor: "#aab7b8",
            label: {
              backgroundColor: 'rgba(0,0,0,0)',
              color: '#aab7b8',
              padding: 2,
              content: 'Актуален час в момента (GMT+2)',
              enabled: true,
              display: true,
              position: 'end',
              textAlign: 'center',
              xAdjust: 9,
              rotation: 270
            }
          }
        ]
      }
    },
    scales: {
      x: {
        ticks: {
          maxRotation: 90,
          minRotation: 90, 
        }
      }, 
      y: {
        ticks: {
          // 新增的格式化回调函数
          callback: function(value) {
            return Number(value).toFixed(1);
          }
        }
      }
    }
  }
});

补充说明 #

• Number(value).toFixed(1)会将数值四舍五入后保留一位小数，同时解决浮点数精度导致的多余小数位问题。
• 如果希望整数不显示小数位（比如200而非200.0），可以修改回调逻辑：

callback: function(value) {
  const num = Number(value);
  return num % 1 === 0 ? num.toString() : num.toFixed(1);
}

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