无法在morris.js中显示xlabel

Question

我在使用morris.js和php显示折线图数据时遇到问题。折线图上的xlabel不希望显示label_jam。如何处理？

以下是折线图视图的错误图像：

这是我的代码

Morris.Line({
    element: 'bar-jam',
    data: <?php echo $data_per15menit; ?>,
    xkey: 'label_jam',
    ykeys: ['value_jml'],
    labels: ['Jumlah'],
    hideHover: 'auto',
    resize: false,
    lineColors: ['#0b62a4'],
    smooth: true
});

Answer 1

将parseTime参数设置为false：

parseTime: false

请尝试以下代码段：

var data =
[
    {"label_jam":"11:15:00", "value_jml":"557"},
    {"label_jam":"11:30:00", "value_jml":"574"},
    {"label_jam":"11:45:00", "value_jml":"630"},
    {"label_jam":"12:00:00", "value_jml":"600"},
    {"label_jam":"12:15:00", "value_jml":"574"},
    {"label_jam":"12:30:00", "value_jml":"533"},
    {"label_jam":"12:45:00", "value_jml":"728"},
    {"label_jam":"13:00:00", "value_jml":"767"}
];

Morris.Line({
    element: 'bar-jam',
    data: data,
    xkey: 'label_jam',
    ykeys: ['value_jml'],
    labels: ['Jumlah'],
    hideHover: 'auto',
    resize: false,
    lineColors: ['#0b62a4'],
    smooth: true,
    parseTime: false
});

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

<div id="bar-jam"></div>

Answer 2

我遇到了同样的问题，我通过设置 parseTime: false 解决了这个问题。

我的代码：

<script>
Morris.Bar({
 element : 'contacts',
 data:[<?php echo $chart_data2; ?>],
 xkey:'specialty'],
  parseTime: false,
 ykeys:['profit'],
 labels:['Σύνολο'],
hideHover: 'auto',
    resize: false,
    lineColors: ['#0b62a4'],
    smooth: true,
    parseTime: false
});
</script>