Morris JS 图表不显示前 3 位数字为 0 的数据

Question

我正在制作一个图表，该图表应显示从下面所示的数据库中检索到的列

date

和列

absolute_value

。虽然日期工作正常，但由于某种原因，绝对值列中以 0 开头的值根本不显示。它们被其他不以 0 开头的数字随机（或不随机）替换和显示。

| date                | absolute_value |
| ------------------- | -------------- | 
| 2023-10-29 18:12:11 | 00027424       |
| 2023-10-29 18:12:11 | 00027465       | 
| 2023-10-29 18:12:11 | 00021236       |
| 2023-10-29 18:12:11 | 00083476       |

这是脚本：

$(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

  });
});

<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>

这是我的查询被回显后得到的图表。例如，值

00027424

在图表上显示为

27,581

。

在数据库上，查询返回正确的值。为什么会发生这种情况？数字的格式是否适合这种类型的数字？

Answer 1

当 JavaScript 解释器解析 OBJECT 本身时，您的数字将被视为八进制。您需要将它们作为字符串发送或在服务器上删除 0。

然后你需要分配hoverCallback来显示原始字符串

这是一个工作脚本

const displayValues = [];
const data = [{
  period: '2023-10-29 17:12:11',
  absolute_value: '00027424'

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

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

}, {
  period: '2023-10-29 20:12:11',
  absolute_value: '00083476'
}].map(({
  period,
  absolute_value
}) => {
  displayValues.push(absolute_value);
  return {
    period,
    absolute_value: parseInt(absolute_value, 10)
  }
});
$(document).ready(function() {
  new Morris.Area({
    hoverCallback: function(index, options, content, row) {
      var data = options.data[index];
      const $content = $(`<div>${content}</div>`); // copy the hover HTML
      $content.find(".morris-hover-point").text(`absolute_value: ${displayValues[index]}`);
      return $content.html();
    },

    element: 'chart4',
    data: data,
    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,
  });
});

<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>