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

Использование диаграммы 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); } }); } });

ОБНОВЛЯЙТЕСЬ ЗДЕСЬ ПОКАЗЫВАЕТ, КАК НЕ РАБОТАЕТ AJAX

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

Обновление Я изменил с минимальной версии chart.js на полную версию, чтобы я мог видеть, где именно это было ошибкой.

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

Ответы

Ответ 1

Нашел ответ,

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

результат исправления

var barChartData = JSON.parse(d);

Ответ 2

Проблема в том, что когда ваш код выполняется, холст еще не создан. Вы должны обернуть свой код внутри функции и назначить эту функцию событию 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>

Ответ 3

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

Ответ 4

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

Я вижу, что вы назначаете d на barChartData

var barChartData = d;

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

Ответ 5

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

window.onload = function () {

}