javascript - 无法显示来自数据库数据的图表
问题描述
这是我的 Graph.js 文件中的错误:
{readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}
在这个文件中,我想用我的数据库中的数据显示一个图表。我已经可以连接数据库并且也可以获取数据。请帮忙,我不知道这是怎么回事。谢谢你。
$(document).ready(function() {
$.ajax({
url: 'http://localhost/GraphPHP/Data.php', //read from db
method: 'GET',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) { //check json data
console.log(data);
var value1 = [];
var value2 = [];
var month_pm = [];
for (var i in data) {
month_pm.push(data[i].month_pm);
value1.push(data[i].Motor_brush);
value2.push(data[i].Gun_baseline);
}
var chartdata = {
labels: month_pm,
datasets: [{
label: 'Motor_brush',
fill: false,
backgroundColor: 'rgba(255, 55, 50, 50)',
borderColor: 'rgba(255, 55, 50, 50)',
hoverBackgroundColor: 'rgba(255, 55, 50, 5)',
hoverBorderColor: 'rgba(255, 55, 50, 0)',
data: value1,
},{
label: 'Gun_baseline',
fill: false,
backgroundColor: 'rgba(255, 230, 80, 50)',
borderColor: 'rgba(255, 230, 80, 50)',
hoverBackgroundColor: 'rgba(255, 230, 80, 5)',
hoverBorderColor: 'rgba(255, 230, 80, 0)',
data: value2,
}
]
};
var ctx = $('#mycanvas');
var barGraph = new Chart(ctx, {
type: 'line',
data: chartdata
});
},
error: function(data) {
console.log(data);
}
});
});
解决方案
推荐阅读
- hadoop - 如何在 Hue Cloudera 上的 Hive 中获取下 n 行
- powershell - 如何在数组上使用带有 IF -contains 的通配符?
- java - 将 Docker 用于 Spring Boot REST 应用程序
- javascript - 为什么我会收到 Invariant Violation: Invariant Violation: Maximum update depth exceeded。在 setState 上?
- arduino - Wemos D1 ESP8266、ioBroker (Raspberry Pi 3 Model B) MQTT 连接失败
- python - cupy.cuda.cublas.CUBLASError: CUBLAS_STATUS_NOT_INITIALIZED 做cupy矩阵乘法时
- docker - 使用 docker-compose 从卷中挂载单个文件
- google-bigquery - 如何运行 BigQuery 查询并将结果定期存储在表中
- excel - 如何成对拆分字符串
- android - 删除并重新安装应用程序后如何查看购买历史记录