未捕獲TypeError：無法讀取未定義的屬性「標籤」Morris.js

Question

我有條形圖和日期選擇器引導程序
我的條形圖工作完美，它在選擇一天時加載數據。 但在開發工具我遇到這些惱人的錯誤：

未捕獲的類型錯誤：無法讀取未定義莫里斯1590 未捕獲的類型錯誤的特性「標籤」：無法讀取的不確定莫里斯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; 
     } 
    }); 
}