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

时间：2016-07-18 17:38:05

标签： javascript asp.net-mvc morris.js

我的Morris图表没有显示最后一个xkey值：

enter image description here

任何想法为什么？

我的数据是：

root@sama-desktop:# ls -la /sys/bus/event_source/devices
total 0
drwxr-xr-x 2 root root 0 jul 18 20:15 .
drwxr-xr-x 4 root root 0 jan  1  1970 ..
lrwxrwxrwx 1 root root 0 jan  1  1970 breakpoint -> ../../../devices/breakpoint
lrwxrwxrwx 1 root root 0 jan  1  1970 software -> ../../../devices/software
lrwxrwxrwx 1 root root 0 jan  1  1970 tracepoint -> ../../../devices/tracepoint

观点：

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

构建它的脚本：

<script>
    var surveyLastDaysChartData = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.SurveyLastDaysChartData));
</script>

 <div class="col-lg-6">
      <div class="card-box">
          <h4 class="header-title m-t-0">Média dos últimos 7 dias</h4>
          <div id="dsb-survey-last-days-chart" style="height: 217px;"></div>
      </div>
 </div><!-- end col -->

2 个答案:

答案 0 :(得分：3)

这也发生在我身上。

我不确定Morris如何计算其元素，但有时候，当它超过宽度时，它会切断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); },
    ...
});

答案 1 :(得分：2)

标签太长时，它是Morris.js的默认行为。您可以使用xLabelAngle，is和角度（以度为单位）绘制x轴标签：

Morris.Line({
        // ID of the element in which to draw the chart.
        element: _surveyLastDaysChartId,
        // Chart data records -- each entry in this array corresponds to a point on the chart.
        data: surveyLastDaysChartData,
        // The name of the data record attribute that contains x-values.
        xkey: 'Date',
        // A list of names of data record attributes that contain y-values.
        ykeys: ['Average'],
        // Labels for the ykeys -- will be displayed when you hover over the chart.
        labels: ['Média'],
        resize: true,
        hideHover: 'auto',
        xLabelAngle: 60, //<-- add this
        ymax: 5
    });

演示： https://jsfiddle.net/iRbouh/hpq42x7b/

相关问题
最新问题