莫里斯面积图显示不正确且缺少 x 轴数据

Question

我想知道是否有人可以指出正确的方向。我有一个名为 'VwDashBoard_Areachart' 的视图查询，其中包含以下五个字段以及来自 MSSQL 服务器的一些信息：

+-----+------+-----+-----+-----+
| ID  | Year | OC  | SS  | ST  |
+-----+------+-----+-----+-----+
|  1  | 2017 |  1  |  1  |  3  |
|  2  | 2018 |  1  |  1  |  2  |
|  3  | 2019 |  1  |  1  |  2  |
+-----+------+-----+-----+-----+

我想在 莫里斯面积图 中展示数据。我在下面的 controller 中有以下代码：

public ActionResult AreaChart()
{
    var mc = from mon in db.VwDashBoard_Areachart
             select new
             {
                 year = mon.Year,
                 value = mon.SS,
                 value1 = mon.OC,
                 value2 = mon.ST,
             };

    return Json(mc, JsonRequestBehavior.AllowGet);
}

这是我的脚本：

$(document).ready(function () {
    $.get('@Url.Action("AreaChart")', function (result) {
        new Morris.Area({
            // ID of the element in which to draw the chart.
            element: 'morris-area-charts',//'myfirstchart',
            data: result,
            xkey: 'year',
            ykeys: ['value', 'value1', 'value2'],
            labels: ['OC', 'SS', 'ST'],
            pointFillColors: ['#ffffff'],
            lineColors: ['#ccc', '#7a6fbe', '#28bbe3'],
            redraw: true,
            lineWidth: [1, 1, 1],
            pointSize: 1,
        });
    });
});

这是剃须刀的代码：

<div class="panel-body">
    <div id="morris-area-charts"></div>
</div>

现在，当我运行脚本时，它显示面积图，但图表显示看起来不正确，并且不在 x 轴上显示年份。但是，如果我将图表显示为条形图，同样的结果看起来不错。

我想知道我是否忘记在脚本或控制器中包含某些内容，或者是否需要修改视图查询中数据布局的表示才能正确显示面积图。

我试过输入一些静态数据，面积图显示正确。问题是当我试图从数据库中获取数据时。任何帮助将不胜感激。

Answer 1

你的代码看起来不错。将 parseTime 参数设置为 false 以避免 Morris 解释日期：

parseTime: false

请根据您的数据尝试以下代码段：

var result = [
    { "year": "2017", "value": 1, "value1": 1, "value2": 3 },
    { "year": "2018", "value": 1, "value1": 1, "value2": 2 },
    { "year": "2019", "value": 1, "value1": 1, "value2": 2 }
];

new Morris.Area({
    element: 'morris-area-charts',
    data: result,
    xkey: 'year',
    ykeys: ['value', 'value1', 'value2'],
    labels: ['OC', 'SS', 'ST'],
    pointFillColors: ['#ffffff'],
    lineColors: ['#ccc', '#7a6fbe', '#28bbe3'],
    redraw: true,
    lineWidth: [1, 1, 1],
    pointSize: 1,
    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="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet" />

<div class="panel-body">
    <div id="morris-area-charts"></div>
</div>

莫里斯面积图显示不正确且缺少 x 轴数据

Incorrect display of Morris Area chart and missing x-axis data

morris.js