我的莫里斯图表未显示最后一个键值:
知道为什么吗?
我的数据是:
[{"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 -->
构建它的脚本:
var _surveyLastDaysChartId = "dsb-survey-last-days-chart";
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',
ymax: 5
});
最佳答案
这也发生在我身上。
我不确定Morris如何计算其元素,但有时,当宽度超过宽度时,它会切断x轴上的值。
我能够修复它的方法(不过这是一个hack)是使用其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); },
...
});
关于javascript - 莫里斯图表未显示MVC的最后一个xkey值,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38442842/