Блог

У меня проблема с синтаксическим анализом данных для моей диаграммы. Конечно, это должно быть включено в автоматический процесс, который я использую getJSON и не хочу использовать ajax, поэтому у меня есть:

 $.getJSON('file.json').done( function (results) {  

        var labels = [];
        var data = [];

        var labels = results.map(function (item) {
            return item.updatedLaels
        });

        var data = results.map(function (item) {
            return item.updatedData;
        });

        console.log(labels)
        console.log(data)
    });  

Итак, конечно, метки и данные регистрируются в консоли надлежащим образом, например:

 (5) [1,2,3,4,5]  

Но как использовать это в этой части:

 var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: 'Example',
                data: data,
                borderColor: 'rgba(75, 192, 192, 1)',
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
            }]
        },
    });  

Потому что index.html генерирует пустую диаграмму без данных. Как правильно отобразить метки и данные?

labels а data переменные находятся undefined за пределами вашей $.getJSON done callback функции.

Вы можете вызвать функцию в, done т.е. createChart(labels, data) , или можете поместить код диаграммы внутрь done

 $.getJSON('file.json').done( function (results) {  

        var labels = [];
        var data = [];

        var labels = results.map(function (item) {
            return item.updatedLabels
        });

        var data = results.map(function (item) {
            return item.updatedData;
        });

        // Create chart
        createChart(labels, data);

});
  

 function createChart(labels, data) {
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: 'Example',
                data: data,
                borderColor: 'rgba(75, 192, 192, 1)',
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
            }]
        },
    });

}