从 data.php 中获取数据并传输到条形图中
Fetch data from data.php and transfer into bargraph
data.php 其中 JSON 形式的数据
我的可视化 bargraph.html 所有大师都看不到该图表上的日期
我的 app.js 从 data.php 获取数据并传输到条形图中,但日期没有插入条形图中 - 我做错了什么?
$(document).ready(function() {
$.ajax({
url: "http://localhost/chartjs/data.php",
method: "GET",
success: function(data) {
console.log(data);
var incubator = [];
var total = [];
var calender = [];
for (var i in data) {
incubator.push("incubator " + data[i].incubatorid);
calender.push("calender " + data[i].calender);
total.push(data[i].total);
}
var chartdata = {
labels: incubator,
datasets: [{
label: 'Total successfull egg hatch hahhaha ',
backgroundColor: 'rgba(200, 200, 200, 0.75)',
borderColor: 'rgba(200, 200, 200, 0.75)',
hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: total
}]
};
var ctx = $("#mycanvas");
var barGraph = new Chart(ctx, {
type: 'bar',
data: chartdata
});
},
error: function(data) {
console.log(data);
}
});
});
你想做库不允许的事情,图表类型bar只接受label
、xAxisID
和yAxisID
在其上打印值,其他属性仅用于设置图表样式。
您可以查看此图表的更多详细信息here:
data.php 其中 JSON 形式的数据
我的可视化 bargraph.html 所有大师都看不到该图表上的日期
我的 app.js 从 data.php 获取数据并传输到条形图中,但日期没有插入条形图中 - 我做错了什么?
$(document).ready(function() {
$.ajax({
url: "http://localhost/chartjs/data.php",
method: "GET",
success: function(data) {
console.log(data);
var incubator = [];
var total = [];
var calender = [];
for (var i in data) {
incubator.push("incubator " + data[i].incubatorid);
calender.push("calender " + data[i].calender);
total.push(data[i].total);
}
var chartdata = {
labels: incubator,
datasets: [{
label: 'Total successfull egg hatch hahhaha ',
backgroundColor: 'rgba(200, 200, 200, 0.75)',
borderColor: 'rgba(200, 200, 200, 0.75)',
hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: total
}]
};
var ctx = $("#mycanvas");
var barGraph = new Chart(ctx, {
type: 'bar',
data: chartdata
});
},
error: function(data) {
console.log(data);
}
});
});
你想做库不允许的事情,图表类型bar只接受label
、xAxisID
和yAxisID
在其上打印值,其他属性仅用于设置图表样式。
您可以查看此图表的更多详细信息here: