Question

我使用morris图表来表示我的数据及其工作正常，除了线图中X aixs的一些意外值。以下是我正在使用的json编码脚本，Date是我的X键。

＆＃13;

[{"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"}]

＆＃13;

＆＃13; 对于上述数据，可以很好地绘制折线图和条形图。但问题是线图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

我认为它是某种划分轴来绘制图表。但我的问题是我无法理解它们的来源。请帮助解决这个问题。

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并尝试一下。

使用morris折线图时X轴上的意外值

1 个答案: