如何让ChartJS保留含0的小数（如19.0不显示为19）

ChartJS默认会把19.0这类数值显示成19，要统一保留原始的小数格式（比如19.0、12.1这种），直接自定义数字格式化逻辑就行，下面是具体实现方法：

1. 让Y轴刻度保留一位小数 #

在图表配置的options.scales.y里加个ticks.callback函数，强制把数值转成一位小数格式：

scales: {
  y: {
    ticks: {
      callback: function(value) {
        return value.toFixed(1);
      }
    }
  }
}

2. 让提示框（hover时的弹窗）也统一格式 #

如果鼠标悬浮时的提示框也要显示19.0这种格式，就在options.plugins.tooltip里设置callbacks.label：

plugins: {
  tooltip: {
    callbacks: {
      label: function(context) {
        return `${context.dataset.label}: ${context.parsed.y.toFixed(1)}`;
      }
    }
  }
}

完整配置示例 #

把上面的代码整合到你的图表里，最终配置大概是这样：

const chartConfig = {
  type: 'line', // 换成你用的图表类型就行
  data: {
    labels: ['数据1', '数据2', '数据3'],
    datasets: [{
      label: '示例数据',
      data: [12.1, 19.0, 3.4],
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]
  },
  options: {
    scales: {
      y: {
        ticks: {
          callback: (value) => value.toFixed(1)
        }
      }
    },
    plugins: {
      tooltip: {
        callbacks: {
          label: (context) => `${context.dataset.label}: ${context.parsed.y.toFixed(1)}`
        }
      }
    }
  }
};

补充说明 #

• toFixed(1)是关键，它会强制保留一位小数，不管原始数值是整数还是带小数的数，正好满足你的需求；要是需要保留两位小数，改成toFixed(2)就行。
• 这样设置后，不管是轴上的刻度还是提示框里的数值，都会统一显示成带一位小数的格式，不会再把19.0变成19了。

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