Круговая диаграмма для Chartjs - JSON Ajax HTTP GET запрос?

Question

Я совершенно новый в этом, и на этой неделе мы узнаем о Chartjs для холста и немного о JSON. Мы должны использовать AJAX HTTP GET-запрос для json-файла, но я честно не знаю, как вызвать функцию для размещения данных и показать график и диаграмму. Если бы кто-нибудь мог помочь, это было бы здорово.

HTML код

<canvas id="pieChart" width="400" height="400"></canvas> 

    <!-- Scripts --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="js/Chart.js"></script> 
<script src="js/js.js"></script> 

JS

$(function() { 
    getPieChartData(); 
}); 


function getPieChartData() { 
    $.get( 
     'http://localhost:8888/r_tomino_assignment6/data/piechart-data.json', 
     function (data) { 
      displayPieChart(data) 
     }, 
     'json' 
     ); 
} 

var context = document.getElementById("pieChart").getContext("2d"); 
var myPieChart = new Chart(context).Pie(data); 

JSON данных

[ 
    { 
     "color": "#F7464A", 
     "highlight": "#FF5A5E", 
     "label": "Red", 
     "value": 300 
    }, 
    { 
     "color": "#46BFBD", 
     "highlight": "#5AD3D1", 
     "label": "Green", 
     "value": 50 
    }, 
    { 
     "color": "#FDB45C", 
     "highlight": "#FFC870", 
     "label": "Yellow", 
     "value": 100 
    } 
]; 

Answer 1

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

Эта функция тогда нужно будет следовать дальше и назвать следующие строки

var context = document.getElementById("pieChart").getContext("2d"); 
var myPieChart = new Chart(context).Pie(data); 

например

function displayPieChart(data) { 
    var context = document.getElementById("pieChart").getContext("2d"); 
    var myPieChart = new Chart(context).Pie(data); 
} 

, который способен видеть ваши данные.