Morris 图表未显示 MVC 的最后一个 xkey 值

Question

我的莫里斯图表未显示最后一个 xkey 值：

\n\n

\n\n

有什么想法吗？

\n\n

我的数据是：

\n\n

[{"Date":"2016-07-17","Average":0.0},{"Date":"2016-07-16","Average":0.0},{"Date":"2016-07-15","Average":4.125},{"Date":"2016-07-14","Average":0.0},{"Date":"2016-07-13","Average":0.0},{"Date":"2016-07-12","Average":0.0},{"Date":"2016-07-11","Average":0.0}]\n

\n\n

风景：

\n\n

<script>\n    var surveyLastDaysChartData = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.SurveyLastDaysChartData));\n</script>\n\n <div class="col-lg-6">\n      <div class="card-box">\n          <h4 class="header-title m-t-0">M\xc3\xa9dia dos \xc3\xbaltimos 7 dias</h4>\n          <div id="dsb-survey-last-days-chart" style="height: 217px;"></div>\n      </div>\n </div><!-- end col -->\n

\n\n

构建它的脚本：

\n\n

var _surveyLastDaysChartId = "dsb-survey-last-days-chart";\n\nMorris.Line({\n        // ID of the element in which to draw the chart.\n        element: _surveyLastDaysChartId,\n        // Chart data records -- each entry in this array corresponds to a point on the chart.\n        data: surveyLastDaysChartData,\n        // The name of the data record attribute that contains x-values.\n        xkey: \'Date\',\n        // A list of names of data record attributes that contain y-values.\n        ykeys: [\'Average\'],\n        // Labels for the ykeys -- will be displayed when you hover over the chart.\n        labels: [\'M\xc3\xa9dia\'],\n        resize: true,\n        hideHover: \'auto\',\n        ymax: 5\n    });\n

\n

Answer 1

这也发生在我身上。

我不确定 Morris 如何计算其元素，但有时，当 x 轴超过宽度时，它会截断 x 轴上的值。

我修复它的方法（尽管这是一个黑客）是使用他们的gridTextSize选项并将其更改为较小的字体大小。

例子：

Morris.Line({
    ...
    gridTextSize: 10,
    ...
});

另一种选择是，如果您的应用程序允许您缩短日期，它可以使用它们的xLabelFormat选项将您的日期解析为较小的格式。

例子：

var display_date = function(d) {
    var month = d.getMonth() + 1,
        day   = d.getDate();

    var formattedDay = month + '-' + day

    return formattedDay; // Return "M-DD" format for date
}

Morris.Line({
    ...
    xLabelFormat: function(x) { return display_date(x); },
    ...
});