Chartjs的餅圖 - JSON Ajax HTTP GET請求？

我在這方面是全新的，本週我們正在學習關於畫布的Chartjs和關於JSON的一些知識。我們被要求爲json文件使用Ajax HTTP GET請求，但是我真的不知道如何調用該函數來放置數據並具有餅圖和條形圖顯示。如果任何人都可以提供幫助，那會很棒。Chartjs的餅圖 - JSON Ajax HTTP GET請求？

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>

$(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 
    } 
];

來源

2017-02-11 logan26

是您的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); 
}

這是能夠看到你的數據。

來源

2017-02-11 01:42:07

嗨@D。年輕的時候，我意識到我沒有打電話給他，但不幸的是我的畫布上沒有顯示任何圖表。：/ – logan26

嘿貝基，創建圖表比這更麻煩一些，我建議通過閱讀文檔來閱讀更好的想法。我基本上只複製和粘貼他們的例子，所以最好看看他們的文檔http://www.chartjs.org/docs/#doughnut-pie-chart-introduction –

Chartjs的餅圖 - JSON Ajax HTTP GET請求？

回答

相關問題