Morris JS Chart无法正常显示以0开头的absolute_value数据

数据库返回的原始数据如下：

date列显示正常，但absolute_value列中以0开头的值无法正确显示（例如00027424被显示为27,581），数据库查询返回值正确，使用的Morris.Area代码如下：

JavaScript代码 #

$(document).ready(function() {
  new Morris.Area({
    element: 'chart4',
    data: [{
      period: '2023-10-29 18:12:11',
      absolute_value: 00027424

    }, {
      period: '2023-10-29 18:12:11',
      absolute_value: 00027465

    }, {
      period: '2023-10-29 18:12:11',
      absolute_value: 00021236

    }, {
      period: '2023-10-29 18:12:11',
      absolute_value: 00083476
    }],
    xkey: 'period',
    ykeys: ['absolute_value'],
    labels: ['absolute_value'],
    hideHover: 'auto',
    pointSize: 3,
    fillOpacity: 0,
    pointStrokeColors: ['#2cbfb7', '#98c932', '#2cbfb7'],
    behaveLikeLine: true,
    gridLineColor: '#eeeeee',
    lineWidth: 2,
    lineColors: ['#2cbfb7', '#98c932', '#2cbfb7'],
    resize: true

  });
});

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<div id="chart4"></div>

问题原因 #

这不是图表自动格式化的问题，而是JavaScript的数字字面量解析规则导致的：

• 在非严格模式的JavaScript中，以0开头的数字会被当作八进制（基数为8）解析，而非十进制。八进制数字只能包含0-7，若数字中存在8或9，不同JS环境的解析行为可能不一致，最终导致数值和数据库返回的十进制值完全不符。
• 你代码里直接把00027424这类值写成数字字面量，JS会自动将其转换为八进制对应的十进制数，这就是显示异常的根源。

解决方案 #

方案1：将数值以字符串形式传入

把absolute_value的值用单引号/双引号包裹，保留原始的前导零格式，同时配置Morris的格式化函数确保显示正确：

$(document).ready(function() {
  new Morris.Area({
    element: 'chart4',
    data: [{
      period: '2023-10-29 18:12:11',
      absolute_value: '00027424'
    }, {
      period: '2023-10-29 18:12:11',
      absolute_value: '00027465'
    }, {
      period: '2023-10-29 18:12:11',
      absolute_value: '00021236'
    }, {
      period: '2023-10-29 18:12:11',
      absolute_value: '00083476'
    }],
    xkey: 'period',
    ykeys: ['absolute_value'],
    labels: ['absolute_value'],
    // 添加格式化函数，确保显示原始字符串
    formatter: function(value) {
      return value;
    },
    hideHover: 'auto',
    pointSize: 3,
    fillOpacity: 0,
    pointStrokeColors: ['#2cbfb7', '#98c932', '#2cbfb7'],
    behaveLikeLine: true,
    gridLineColor: '#eeeeee',
    lineWidth: 2,
    lineColors: ['#2cbfb7', '#98c932', '#2cbfb7'],
    resize: true
  });
});

方案2：保留数值类型，显示时补前导零

如果需要将absolute_value作为数值计算，可先转换为十进制数值，再通过格式化函数补前导零：

// 假设需要固定8位长度，不足补零
formatter: function(value) {
  return value.toString().padStart(8, '0');
}

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