Uncaught TypeError : 정의되지 않은 Morris.js의 'label'속성을 읽을 수 없습니다.

Question

막대 그래프와 날짜 선택 도구가 있습니다.
막대 그래프가 완벽하게 작동하며 하루를 선택할 때 데이터를로드합니다. 그러나 개발자 도구에서 난 데 이러한 성가신 오류 :

catch되지 않은 유형 오류 : 정의되지 않은 모리스 1590 catch되지 않은 유형 오류의 특성 '라벨'을 읽을 수 없습니다 : 정의되지 않은 모리스 (424)

의 특성 '길이'를 읽을 수 없습니다 이 문제를 해결하는 방법을 알고 싶습니다. 나는 그곳에 그러한 오류가 있기를 원하지 않는다.

 function hourString(hour) { 
    if (hour === 0) { 
     return "12:00 am"; 
    } 
    if (hour < 12) { 
     return hour + ":00 am"; 
    } 
    if (hour === 12) { 
     return "12:00 pm"; 
    } 
    return (hour - 12) + ":00 pm"; 
} 

    var ordersPackChart = 
    Morris.Bar({ 
     element: 'morris-bar-chart', 
     data: [], 
     xkey: 'y', 
     ykeys: ['a'], 
     ymax: 1000, 
     labels: ['Pack per hour'], 
     hideHover: true, 
     resize: true, 
     barColors: ['#ed5565'], 
     parseTime: false 
    }); 

function packResult(historydate, result) { 
    result = JSON.parse(result); 

    var data = []; 
    for (var hour = 6; hour < 24; hour++) { 

     var numberPack = 0; 
     for (var i = 0; i < result.Result.length; i++) { 
      if (result.Result[i].PACK_HOUR == hour) { 
       numberPack = result.Result[i].NUM_ORDER_PACK; 
       break; 
      } 
     } 

     data.push({ y: hourString(hour), a: numberPack }); 
    } 

    ordersPackChart.setData(data); 
} 


$(document).ready(function() {   
    $("#fromdate").datepicker({ 
     autoclose: true 
    }).change(dateChanged) 
     .on('changeDate', dateChanged); 
     }); 

function dateChanged(ev) { 
    $(this).datepicker('hide'); 

    var day = $('#fromdate').val(); 

    $.ajax({ 
     type: "GET", 
     url: '@Url.Action("GetQueryResult")', 
     context: document.body, 
     data: { 
      querySetName: 'dashboard-packorder-statistics', 
      queryName: 'OrderPack', 
      historydate: day 
     }, 
     success: function (result) { 
      packResult(ordersPackChart.HISTORY_DATE, result); 
     }, 
     error: function (xhr) { 
      var message = "ErrorStatus: " + xhr.status + " ReadyState: " + xhr.readyState; 
     } 
    }); 
} 

// Reload the Morris chart 
jQuery(function ($) { 
    $('#fromdate').on('change', function() { 
     ordersPackChart.options.fromdate = $(this).is('changeDate'); 
     ordersPackChart.redraw(); 
    }); 
}); 

Answer 1

문제가 해결되었습니다. 데이터가없는 차트에서 마우스가 마우스로 움직일 때마다 이러한 오류가 발생했습니다. 그래서 나는 그것을 고쳤다. 그리고 저는 datepicker 이벤트를 두 번 호출했습니다.

이 내 변경

 function hourString(hour) { 
    if (hour === 0) { 
     return "12:00 am"; 
    } 
    if (hour < 12) { 
     return hour + ":00 am"; 
    } 
    if (hour === 12) { 
     return "12:00 pm"; 
    } 
    return (hour - 12) + ":00 pm"; 
} 

    var ordersPackChart; 

function packResult(historydate, result) { 
    result = JSON.parse(result); 

    var data = []; 
    for (var hour = 6; hour < 24; hour++) { 

     var numberPack = 0; 
     for (var i = 0; i < result.Result.length; i++) { 
      if (result.Result[i].PACK_HOUR == hour) { 
       numberPack = result.Result[i].NUM_ORDER_PACK; 
       break; 
      } 
     } 

     data.push({ y: hourString(hour), a: numberPack }); 
    } 

    if (ordersPackChart != null) { 
     ordersPackChart.setData(data); 
    } else { 
     ordersPackChart = 
      Morris.Bar({ 
       element: 'morris-bar-chart', 
       data: data, 
       xkey: 'y', 
       ykeys: ['a'], 
       ymax: 1000, 
       labels: ['Pack per hour'], 
       hideHover: true, 
       resize: true, 
       barColors: ['#ed5565'], 
       parseTime: false 
      }); 
    } 
} 


$(document).ready(function() {   
    $("#fromdate").datepicker({ 
     autoclose: true 
    }).change(dateChanged); 
}); 

var currentDay; 

function dateChanged(ev) { 
    $(this).datepicker('hide'); 

    var day = $('#fromdate').val(); 
    if (day == currentDay) 
     return; 

    currentDay = day; 

    $.ajax({ 
     type: "GET", 
     url: '@Url.Action("GetQueryResult")', 
     context: document.body, 
     data: { 
      querySetName: 'dashboard-packorder-statistics', 
      queryName: 'OrderPack', 
      historydate: day 
     }, 
     success: function (result) { 
      packResult(day, result); 
     }, 
     error: function (xhr) { 
      var message = "ErrorStatus: " + xhr.status + " ReadyState: " + xhr.readyState; 
     } 
    }); 
}