모리스 차트

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/