Диаграмма Js Невозможно прочитать свойство 'length' of undefined

Question

Использование диаграммы js Я пытаюсь извлечь данные из вызова Ajax для подачи на диаграмму. Я нашел несколько других сообщений, где люди предложили отложить загрузку холста, но ничего не показалось, что он работает. В настоящее время это то, что я ниже, и ошибка, что я получаю

$(function() { 

GetChartData(); 

    function GetChartData() { 
    $.ajax({ 
     url: ajaxURL, 
     method: 'GET', 
     dataType: 'json', 
     success: function (d) { 
      //------------- 
      //- BAR CHART - 
      //------------- 
      var barChartData = d; 
      var barChartCanvas = $("#barChart").get(0).getContext("2d"); 
      var barChart = new Chart(barChartCanvas); 
      // console.log(datajson); 
      //barChartData.datasets[1].fillColor = "#00a65a"; 
      //barChartData.datasets[1].strokeColor = "#00a65a"; 
      //barChartData.datasets[1].pointColor = "#00a65a"; 
      var barChartOptions = { 
       //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value 
       //scaleBeginAtZero: true, 
       //Boolean - Whether grid lines are shown across the chart 
       scaleShowGridLines: true, 
       //String - Colour of the grid lines 
       scaleGridLineColor: "rgba(0,0,0,.05)", 
       //Number - Width of the grid lines 
       scaleGridLineWidth: 1, 
       //Boolean - Whether to show horizontal lines (except X axis) 
       scaleShowHorizontalLines: true, 
       //Boolean - Whether to show vertical lines (except Y axis) 
       scaleShowVerticalLines: true, 
       //Boolean - If there is a stroke on each bar 
       barShowStroke: true, 
       //Number - Pixel width of the bar stroke 
       barStrokeWidth: 2, 
       //Number - Spacing between each of the X value sets 
       barValueSpacing: 5, 
       //Number - Spacing between data sets within X values 
       barDatasetSpacing: 1, 
       multiTooltipTemplate: "<%=datasetLabel%>: <%= value + ' %' %>", 
       //String - A legend template 
       legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>", 
       //Boolean - whether to make the chart responsive 
       responsive: true, 
       maintainAspectRatio: true 
      }; 


      barChartOptions.datasetFill = false; 
      barChart.Bar(barChartData, barChartOptions); 


     } 
    }); 
    } 
}); 

ОБНОВЛЕНИЕ ЗДЕСЬ ПОКАЗ КАК NON AJAX РАБОТЫ

Код ниже принимает результаты Ajax получить запрос (который я получил от сбрасывания его на консоль) и создать «жестко закодированную» версию того же самого. Единственное, что технически должно быть разным, - это то, что данные загружаются во время страницы, а во-вторых, данные загружаются очень кратко после.

var chartData = { 
    "labels": [ 
     "April" 
    ], 
    "datasets": [ 
     { 
      "label": "Not Sure What to Put Here", 
      "fillColor": "#662B60", 
      "strokeColor": "#662B60", 
      "pointColor": "#662B60", 
      "pointStrokeColor": "#662B60", 
      "pointHighlightFill": "#662B60", 
      "pointHighlightStroke": "#662B60", 
      "data": [ 
      1 
      ] 
     }, 
     { 
      "label": "Not Sure What to Put Here", 
      "fillColor": "#88B56E", 
      "strokeColor": "#88B56E", 
      "pointColor": "#88B56E", 
      "pointStrokeColor": "#88B56E", 
      "pointHighlightFill": "#88B56E", 
      "pointHighlightStroke": "#88B56E", 
      "data": [ 
      1 
      ] 
     }, 
     { 
      "label": "Not Sure What to Put Here", 
      "fillColor": "#48CA2B", 
      "strokeColor": "#48CA2B", 
      "pointColor": "#48CA2B", 
      "pointStrokeColor": "#48CA2B", 
      "pointHighlightFill": "#48CA2B", 
      "pointHighlightStroke": "#48CA2B", 
      "data": [ 
      0.83 
      ] 
     } 
    ] 
}; 


    //------------- 
    //- BAR CHART - 
    //------------- 
var barChartData = chartData; 
    var barChartCanvas = $("#barChart").get(0).getContext("2d"); 
    var barChart = new Chart(barChartCanvas); 

    //barChartData.datasets[1].fillColor = "#00a65a"; 
    //barChartData.datasets[1].strokeColor = "#00a65a"; 
    //barChartData.datasets[1].pointColor = "#00a65a"; 
    var barChartOptions = { 
     //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value 
     //scaleBeginAtZero: true, 
     //Boolean - Whether grid lines are shown across the chart 
     scaleShowGridLines: true, 
     //String - Colour of the grid lines 
     scaleGridLineColor: "rgba(0,0,0,.05)", 
     //Number - Width of the grid lines 
     scaleGridLineWidth: 1, 
     //Boolean - Whether to show horizontal lines (except X axis) 
     scaleShowHorizontalLines: true, 
     //Boolean - Whether to show vertical lines (except Y axis) 
     scaleShowVerticalLines: true, 
     //Boolean - If there is a stroke on each bar 
     barShowStroke: true, 
     //Number - Pixel width of the bar stroke 
     barStrokeWidth: 2, 
     //Number - Spacing between each of the X value sets 
     barValueSpacing: 5, 
     //Number - Spacing between data sets within X values 
     barDatasetSpacing: 1, 
     multiTooltipTemplate: "<%=datasetLabel%>: <%= value + ' %' %>", 
     //String - A legend template 
     legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>", 
     //Boolean - whether to make the chart responsive 
     responsive: true, 
     maintainAspectRatio: true 
    }; 


    barChartOptions.datasetFill = false; 
    barChart.Bar(barChartData, barChartOptions); 

Update Я изменил от мин версии chart.js до полной версии, так что я мог видеть, где именно он был erroring на.

Вот изображение из хромированной консоли

Answer 1

Найдено ответ,

Результаты Ajax должен быть проанализирован первым.

результате Устранить

var barChartData = JSON.parse(d); 

Answer 2

Похоже, вы используете объект, который не существует, ну по крайней мере, я не могу видеть его, datasets. Я могу видеть только length, вызываемый этим объектом, если отсутствует код?

Я могу видеть вас назначить d для barChartData

var barChartData = d; 

Таким образом, вы можете заменить экземпляры datasets с barChartData.

Answer 3

для более подробного объяснения и других пользователей, что имеет эту проблему, убедитесь, что ваш контейнер холст элемент существует

Answer 4

Проблема заключается в том, что, когда ваш код исполняется, холст не был создано еще. Вы должны обернуть свой код внутри функции и назначить эту функцию событию window.onload. Вы можете увидеть пример кода ниже.

window.onload = function() { 
 
    var ctx = document.getElementById("myChart"); 
 
    var lineChart = new Chart(ctx, { 
 
    type: 'line', 
 
    data: { 
 
     labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], 
 
     datasets: [{ 
 
     label: "2015", 
 
     data: [10, 8, 6, 5, 12, 8, 16, 17, 6, 7, 6, 10] 
 
     }] 
 
    } 
 
    }) 
 
}

<html> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script> 
 

 
</head> 
 

 
<body> 
 
    <canvas id="myChart"></canvas> 
 
</body> 
 

 
</html>

Answer 5

работает следующие работал для меня:

window.onload = function() { 

}