使用莫里斯折线图时 X 轴上的意外值

Question

我使用莫里斯图来表示我的数据及其工作正常，除了折线图中 X 轴的一些意外值。以下是我正在使用的 json 编码脚本，日期是我的 X 键。

[{"Date":"5","Uria":"2.22140","TSP":"1.22140","MOP":"1.22140","TDM":"2.22140"},
{"Date":"6","Uria":"14.79140","TSP":"8.43690","MOP":"6.68960","TDM":"6.72480"},
{"Date":"7","Uria":"3.48100","TSP":"3.14000","MOP":"2.21700","TDM":"0.12000"}]

对于上述数据，折线图和条形图绘制得很好。但问题是对于折线图 X 轴，当数据范围较小时，我得到了如下所示的一些值。

1905-01 1905-03 1905-05 1905-07 1905-09 1905-11 1906-01 1906-03 1906-05 1906-07 1906-09 1906-11 1907-01

我认为这是某种划分轴来绘制图表。但我的问题是我不明白他们来自哪里 from.Please 帮助解决这个问题。

Answer 1

添加属性 parseTime: false 以获得正确的结果。您的日期被解析为日期。日期 5 似乎呈现为 1905。日期 6 呈现为 1906。在 1905 和 1906 之间，Morris.js 填充短轴，因此您看到 1905-01、-03、-05、-07、-09 和-11.

HTML

<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
<meta charset=utf-8 />
<title>Morris.js Area Chart Example</title>
</head>
<body>
  <div id="area-example"></div>
</body>
</html>

JS

Morris.Area({
  element: 'area-example',
  data: [  
    {  
        "Date":"5",
        "Uria":"2.22140",
        "TSP":"1.22140",
        "MOP":"1.22140",
        "TDM":"2.22140"
    },
    {  
        "Date":"6",
        "Uria":"14.79140",
        "TSP":"8.43690",
        "MOP":"6.68960",
        "TDM":"6.72480"
    },
    {  
        "Date":"7",
        "Uria":"3.48100",
        "TSP":"3.14000",
        "MOP":"2.21700",
        "TDM":"0.12000"
    }
  ],
  xkey: 'Date',
  ykeys: ['Uria', 'TSP', 'MOP', 'TDM'],
  labels: ['Uria', 'TSP', 'MOP', 'TDM'],
  parseTime: false
});

示例：https://jsfiddle.net/e8jbeLzv/1/#run，或者您可以使用 jsbin.com 并尝试一下。

使用莫里斯折线图时 X 轴上的意外值

Unexpected values on X axis when using morris line charts

morris.js