[英]How to plot Json data in Chart js
如何在我有來自我的data.php文件的json結果的chartJs中傳遞值
我的傑森
[
{
"Login_Funnel":"6",
"Playlist_Funnel_1":"1",
"Logout_Funnel_2":"0"
}
]
在ChartJS中的腳本就像
$(document).ready(function() {
new Chart($("#chart"), {
type: 'bar',
data: {
labels: ["Beta Value", "Charlie Value", "Delta Value"],
datasets: [{
label: 'Awesome Dataset',
data: [ 302, 175, 50],
backgroundColor: "rgba(75, 192, 192, 1)"
}]
},
}
}
在這里我需要將值替換為
標簽:[“ Login_Funnel”,“ Playlist_Funnel_1”,“ Logout_Funnel_2”]
和
數據:[6,1,0]
由於Chartjs是新手,因此我們將不勝感激
先感謝您
您可以通過data.php遍歷json返回並在options對象上設置數據,請檢查此jsfiddle
$(document).ready(function() {
var options = {
type: 'bar',
data: {
labels: ["Beta Value", "Charlie Value", "Delta Value"],
datasets: [{
label: 'Awesome Dataset',
data: [ 302, 175, 50],
backgroundColor: "rgba(75, 192, 192, 1)"
}]
}
};
var chart = new Chart($("#chart"), options);
var data = [
{
"Login_Funnel":"6",
"Playlist_Funnel_1":"1",
"Logout_Funnel_2":"0"
}
];
options.data.labels = []; //reset the labels
options.data.datasets = [{
label: 'Awesome Dataset',
data: [],
backgroundColor: "rgba(75, 192, 192, 1)"
}]; // reset the previous data
for (var i in data) { // iterate the data array
for (var y in data[i]) { //iterate the object
if (i == 0) {
options.data.labels.push(y);
}
options.data.datasets[i].data.push(data[i][y]);
}
}
chart.update(); // update the chart with the new data
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.