javascript - 未捕获类型错误 : Cannot read property 'label' of undefined Morris. js

Question

我有一个条形图和一个日期选择器 Bootstrap
我的条形图工作得很好，它在选择一天时加载数据。但在开发者工具中我遇到了这些恼人的错误:

未捕获类型错误:无法读取未定义 Morris 1590 的属性“标签”未捕获类型错误:无法读取未定义 Morris 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

我解决了我的问题。每当我的鼠标悬停在图表中而没有数据时，就会出现这些错误。所以我解决了这个问题。而且我还两次调用了日期选择器的事件。

这些是我的改变

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