Php ChartJS-在显示MySql表中的数据时格式化日期时间X轴
我已经对这个示例进行了修改，并成功地从MySql数据库中检索数据，并将其绘制为ok，但我无法将X轴正确地格式化为日期-时间轴 linegraph.html：Php ChartJS-在显示MySql表中的数据时格式化日期时间X轴,php,mysql,chart.js,Php,Mysql,Chart.js,我已经对这个示例进行了修改，并成功地从MySql数据库中检索数据，并将其绘制为ok，但我无法将X轴正确地格式化为日期-时间轴 linegraph.html： <!DOCTYPE html> <html> <head> <title>ChartJS - LineGraph</title> <style> .chart-container { width: 1000px;
<!DOCTYPE html>
<html>
<head>
<title>ChartJS - LineGraph</title>
<style>
.chart-container {
width: 1000px;
height: auto;
}
</style>
</head>
<body>
tst1
<div class="chart-container">
<canvas id="mycanvas"></canvas>
</div>
tst2
<!-- javascript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/Chart.js"></script>
<script type="text/javascript" src="js/linegraph.js"></script>
</body>
</html>
$(document).ready(function(){
$.ajax({
url : "followersdata.php",
type : "GET",
success : function(data){
console.log(data);
var datetime = [];
var value1 = [];
//var twitter_follower = [];
//var googleplus_follower = [];
for(var i in data) {
datetime.push(data[i].reading_time);
value1.push(data[i].value1);
//twitter_follower.push(data[i].twitter);
//googleplus_follower.push(data[i].googleplus);
}
var chartdata = {
labels: datetime,
datasets: [
{
label: "Value1",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(59, 89, 152, 0.75)",
borderColor: "rgba(59, 89, 152, 1)",
pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
pointHoverBorderColor: "rgba(59, 89, 152, 1)",
data: value1
//},
//{
// label: "twitter",
// fill: false,
// lineTension: 0.1,
// backgroundColor: "rgba(29, 202, 255, 0.75)",
// borderColor: "rgba(29, 202, 255, 1)",
// pointHoverBackgroundColor: "rgba(29, 202, 255, 1)",
// pointHoverBorderColor: "rgba(29, 202, 255, 1)",
// data: twitter_follower
//},
//{
// label: "googleplus",
// fill: false,
// lineTension: 0.1,
// backgroundColor: "rgba(211, 72, 54, 0.75)",
// borderColor: "rgba(211, 72, 54, 1)",
// pointHoverBackgroundColor: "rgba(211, 72, 54, 1)",
// pointHoverBorderColor: "rgba(211, 72, 54, 1)",
// data: googleplus_follower
}
],
options: {
maintainAspectRatio: false,
animation: false,
legend: {display: true },
scales:{xAxes: [{type: 'time',time: {unit: 'day',displayFormats: { 'day': 'MMM D' }}}]}
}
};
var ctx = $("#mycanvas");
var LineGraph = new Chart(ctx, {
type: 'line',
data: chartdata
});
},
error : function(data) {
}
});
});
options: {
maintainAspectRatio: false,
animation: false,
legend: {display: true },
scales:{xAxes: [{type: 'time',time: {unit: 'day',displayFormats: { 'day': 'MMM D' }}}]}
}
我哪里做错了？图例也不显示，我如何才能使选项工作。代码中的问题是，图表
选项数据对象中，实际上被chart.js忽略。将其上移到下一个层次结构级别。否则，xAxis
定义看起来很好。也没有必要像一条评论所建议的那样显式解析日期，因为它的格式可以由用户解析
除了您的xAxis
定义之外，您还可以通过以下更简单的方式来完成，默认的单位：'day'
实际上就是您要查找的（'MMM D'
）
请参见下面的简化示例：
const数据=[
{“阅读时间”：“2020-02-1022:38:48”，“价值1”：“1.10”}，
{“阅读时间”：“2020-02-11 22:39:18”，“价值1”：“1.20”}，
{“阅读时间”：“2020-02-12 22:39:49”，“价值1”：“1.40”}，
{“阅读时间”：“2020-02-13 22:40:19”，“价值1”：“1.10”}，
{“阅读时间”：“2020-02-14 22:40:49”，“价值1”：“1.20”}，
{“阅读时间”：“2020-02-1522:41:19”，“价值1”：“1.30”}
];
新图表（“mycanvas”{
键入：“行”，
数据：{
标签：data.map（o=>o.reading\u time），
数据集：[{
标签：“Value1”，
填充：假，
边框颜色：“rgba（59,89,152,1）”，
数据：data.map（o=>o.value1）
}],
},
选项：{
比例：{
xAxes：[{
键入：“时间”，
时间：{
单位：'天'
}
}]
}
}
});
在将日期作为options args
传递之前，您需要根据需要在php
或front-end
中解析日期？我刚刚尝试了datetime.push（Date.parse（data[I].reading_-time））在linegraph.js中，我现在可以在图中看到毫秒，因此选项仍然没有影响。有趣的是，我还看到了其他一些例子，其中输入数据以YYYY-MM-DD HH-MM-SS格式手动输入到变量中，而不进行解析，并且可以正常工作。非常感谢，这非常有用，让我能够得到我想要的-非常感谢！不过，我需要做的另一件事是让它工作起来（以防它对其他人有用），我需要在
之前加入
。
$(document).ready(function(){
$.ajax({
url : "followersdata.php",
type : "GET",
success : function(data){
console.log(data);
var datetime = [];
var value1 = [];
//var twitter_follower = [];
//var googleplus_follower = [];
for(var i in data) {
datetime.push(data[i].reading_time);
value1.push(data[i].value1);
//twitter_follower.push(data[i].twitter);
//googleplus_follower.push(data[i].googleplus);
}
var chartdata = {
labels: datetime,
datasets: [
{
label: "Value1",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(59, 89, 152, 0.75)",
borderColor: "rgba(59, 89, 152, 1)",
pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
pointHoverBorderColor: "rgba(59, 89, 152, 1)",
data: value1
//},
//{
// label: "twitter",
// fill: false,
// lineTension: 0.1,
// backgroundColor: "rgba(29, 202, 255, 0.75)",
// borderColor: "rgba(29, 202, 255, 1)",
// pointHoverBackgroundColor: "rgba(29, 202, 255, 1)",
// pointHoverBorderColor: "rgba(29, 202, 255, 1)",
// data: twitter_follower
//},
//{
// label: "googleplus",
// fill: false,
// lineTension: 0.1,
// backgroundColor: "rgba(211, 72, 54, 0.75)",
// borderColor: "rgba(211, 72, 54, 1)",
// pointHoverBackgroundColor: "rgba(211, 72, 54, 1)",
// pointHoverBorderColor: "rgba(211, 72, 54, 1)",
// data: googleplus_follower
}
],
options: {
maintainAspectRatio: false,
animation: false,
legend: {display: true },
scales:{xAxes: [{type: 'time',time: {unit: 'day',displayFormats: { 'day': 'MMM D' }}}]}
}
};
var ctx = $("#mycanvas");
var LineGraph = new Chart(ctx, {
type: 'line',
data: chartdata
});
},
error : function(data) {
}
});
});
options: {
maintainAspectRatio: false,
animation: false,
legend: {display: true },
scales:{xAxes: [{type: 'time',time: {unit: 'day',displayFormats: { 'day': 'MMM D' }}}]}
}
xAxes: [{
type: 'time',
time: {
unit: 'day'
}
}]