モリス・チャートは

Question

マイモリスチャートが最後XKEY値を示していないMVCとの最後のXKEY値を示していませんか？

私のデータは次のとおりです。

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

Answer 1

これはあまりにも私に起こりました。

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); }, 
    ... 
}); 

Answer 2

ラベルが長すぎる場合には、Morris.jsのデフォルトの動作です。あなたはxLabelAngleを使用することができ、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/