Javascript 如何在chart.js中将日期显示为x轴上的标签_Javascript_Php_Html_Chart.js

Javascript 如何在chart.js中将日期显示为x轴上的标签

javascript php html chart.js

Javascript 如何在chart.js中将日期显示为x轴上的标签,javascript,php,html,chart.js,Javascript,Php,Html,Chart.js,我正在尝试使用chart.js在x.axix上显示日期。有两个值作为json从数据库接收；时间戳&传感器读取。我想根据图表中的每个时间戳显示传感器读数的刻度。数据每隔几分钟定期更新一次这是时间戳的格式： 2018-12-07 12:45:17 这是我目前为止的图表代码： var ctx = document.getElementById ('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'li

我正在尝试使用chart.js在x.axix上显示日期。有两个值作为json从数据库接收；时间戳&传感器读取。我想根据图表中的每个时间戳显示传感器读数的刻度。数据每隔几分钟定期更新一次

这是时间戳的格式：

2018-12-07 12:45:17

这是我目前为止的图表代码：

var ctx = document.getElementById ('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
    type: 'line',
    data: {
    labels: time_Array, // example value 2018-12-07 12:45:17 .......
    datasets: [{
    label: 'Humidity',
    data: meas_value_Array, //// example value 116, 120 110 ....
    backgroundColor: "rgba(255,153,0,0.4)"
    }]
    },

        options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }],
            xAxes: [{
                type: 'time',
                time: {
                    unit: 'minute',
                    displayFormats: {
                        second: 'h:MM:SS',
                        minute: 'h:MM',
                        hour: 'hA',
                        day: 'MMM D',
                        month: 'YYYY MMM',
                        year: 'YYYY'
                    },                            
                },
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'value'
                }                        
            }]                    
        }
    }
});

TypeError: i.min is undefined[Learn More] Chart.min.js:14:18390
determineDataLimits
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:14:18390
update
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:13:2110
n
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:12:23263
[26]</e.exports/o.each
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:12:8324
update
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:12:24692
updateLayout
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:11:30363
update
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:11:30126
[23]</e.exports/t.Controller
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:11:27625
t
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:12:22144
dspChrt3

Uncaught TypeError: Cannot read property 'call' of undefined
    at a.determineDataLimits (Chart.min.js:14)
    at a.update (Chart.min.js:13)
    at n (Chart.min.js:12)
    at Object.o.each (Chart.min.js:12)
    at Object.update (Chart.min.js:12)
    at t.Controller.updateLayout (Chart.min.js:11)
    at t.Controller.update (Chart.min.js:11)
    at new t.Controller (Chart.min.js:11)
    at new t (Chart.min.js:12)
    at dspChrt3 (chart3.php:30)

它在firefox中引发了这个错误：

var ctx = document.getElementById ('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
    type: 'line',
    data: {
    labels: time_Array, // example value 2018-12-07 12:45:17 .......
    datasets: [{
    label: 'Humidity',
    data: meas_value_Array, //// example value 116, 120 110 ....
    backgroundColor: "rgba(255,153,0,0.4)"
    }]
    },

        options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }],
            xAxes: [{
                type: 'time',
                time: {
                    unit: 'minute',
                    displayFormats: {
                        second: 'h:MM:SS',
                        minute: 'h:MM',
                        hour: 'hA',
                        day: 'MMM D',
                        month: 'YYYY MMM',
                        year: 'YYYY'
                    },                            
                },
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'value'
                }                        
            }]                    
        }
    }
});

TypeError: i.min is undefined[Learn More] Chart.min.js:14:18390
determineDataLimits
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:14:18390
update
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:13:2110
n
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:12:23263
[26]</e.exports/o.each
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:12:8324
update
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:12:24692
updateLayout
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:11:30363
update
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:11:30126
[23]</e.exports/t.Controller
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:11:27625
t
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:12:22144
dspChrt3

Uncaught TypeError: Cannot read property 'call' of undefined
    at a.determineDataLimits (Chart.min.js:14)
    at a.update (Chart.min.js:13)
    at n (Chart.min.js:12)
    at Object.o.each (Chart.min.js:12)
    at Object.update (Chart.min.js:12)
    at t.Controller.updateLayout (Chart.min.js:11)
    at t.Controller.update (Chart.min.js:11)
    at new t.Controller (Chart.min.js:11)
    at new t (Chart.min.js:12)
    at dspChrt3 (chart3.php:30)

下面是我试图添加数组值的代码片段硬代码：

var ctx = document.getElementById ('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
    type: 'line',
    data: {
    labels: time_Array, // example value 2018-12-07 12:45:17 .......
    datasets: [{
    label: 'Humidity',
    data: meas_value_Array, //// example value 116, 120 110 ....
    backgroundColor: "rgba(255,153,0,0.4)"
    }]
    },

        options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }],
            xAxes: [{
                type: 'time',
                time: {
                    unit: 'minute',
                    displayFormats: {
                        second: 'h:MM:SS',
                        minute: 'h:MM',
                        hour: 'hA',
                        day: 'MMM D',
                        month: 'YYYY MMM',
                        year: 'YYYY'
                    },                            
                },
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'value'
                }                        
            }]                    
        }
    }
});

TypeError: i.min is undefined[Learn More] Chart.min.js:14:18390
determineDataLimits
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:14:18390
update
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:13:2110
n
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:12:23263
[26]</e.exports/o.each
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:12:8324
update
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:12:24692
updateLayout
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:11:30363
update
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:11:30126
[23]</e.exports/t.Controller
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:11:27625
t
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:12:22144
dspChrt3

Uncaught TypeError: Cannot read property 'call' of undefined
    at a.determineDataLimits (Chart.min.js:14)
    at a.update (Chart.min.js:13)
    at n (Chart.min.js:12)
    at Object.o.each (Chart.min.js:12)
    at Object.update (Chart.min.js:12)
    at t.Controller.updateLayout (Chart.min.js:11)
    at t.Controller.update (Chart.min.js:11)
    at new t.Controller (Chart.min.js:11)
    at new t (Chart.min.js:12)
    at dspChrt3 (chart3.php:30)


var time_Array=[“2018-12-07 15:45:17”，“2018-12-07 15:30:17”，“2018-12-07 15:15:16”，“2018-12-07 15:00:17”，“2018-12-07 14:45:16”，“2018-12-07 14:30:17”，“2018-12-07 14:00:17”，“2018-12-07 13:45:17”，“2018-12-07 13:30:16”，“2018-12-07 13:15:17”]；
var meas_值_数组=[121,121,121,121,121,121,121,121,121,121,121]；
//console.log（时间数组）；
//日志（测量值数组）；
var ctx=document.getElementById（'myChart'）.getContext（'2d'）；
var myChart=新图表（ctx{
键入：“行”，
数据：{
标签：时间数组，
数据集：[{
标签：“湿度”，
数据：测量值数组，
背景颜色：“rgba（255153,0,0.4）”
}]
},
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}],
xAxes：[{
键入：“时间”，
时间：{
单位：分钟，
显示格式：{
第二个：“h:MM:SS”，
分钟：“h:MM”，
小时:"哈",，
day:‘嗯’，
月份：“YYYY-MMM”，
年份：“YYYY”
},                            
},
显示：对，
scaleLabel：{
显示：对，
标签字符串：“值”
}                        
}]                    
}
}
});

如果我正确理解了您的意思，那么您只希望x轴是一个日期，所以2018-12-07 15:45:17。我已经设法做到了。这是我的全部代码。以前没有使用过chart.js，也没有太多时间正确查看，但请查看显示格式并更改所需的方式。希望这有帮助

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js"></script>

<body>
<canvas id="myChart" width="400" height="400"></canvas>

<script>
$(document).ready(function(){
        var time_Array = ["2018-12-07 15:45:17", "2018-12-07 15:30:17", "2018-12-07 15:15:16", "2018-12-07 15:00:17", "2018-12-07 14:45:16", "2018-12-07 14:30:17", "2018-12-07 14:15:17", "2018-12-07 14:00:17", "2018-12-07 13:45:17", "2018-12-07 13:30:16", "2018-12-07 13:15:17", "2018-12-07 16:00:17"];
        var meas_value_Array = [121, 121, 121, 121, 121, 121, 121, 121, 121, 121, 121, 121];


        //console.log(time_Array);
        //console.log(meas_value_Array);

        var ctx = document.getElementById ('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
        type: 'line',
        data: {
        labels: time_Array,
        datasets: [{
        label: 'Humidity',
        data: meas_value_Array,
        backgroundColor: "rgba(255,153,0,0.4)"
        }]
        },

            options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }],
                xAxes: [{
                    type: 'time',
                    time: {
                        parser: 'YYYY-MM-DD HH:mm:ss',
                        unit: 'minute',
                        displayFormats: {
                            'minute': 'YYYY-MM-DD HH:mm:ss',
                            'hour': 'YYYY-MM-DD HH:mm:ss'
                        }
                    },
                    ticks: {
                        source: 'data'
                    }
                }]                    
            }
        }
    });
});
</script>

</body>
</html>


$（文档）.ready（函数（）{
var time_Array=[“2018-12-07 15:45:17”，“2018-12-07 15:30:17”，“2018-12-07 15:15:16”，“2018-12-07 15:00:17”，“2018-12-07 14:45:16”，“2018-12-07 14:30:17”，“2018-12-07 14:00:17”，“2018-12-07 13:45:17”，“2018-12-07 13:30:16”，“2018-12-07 13:15:17”]；
var meas_值_数组=[121,121,121,121,121,121,121,121,121,121,121]；
//console.log（时间数组）；
//日志（测量值数组）；
var ctx=document.getElementById（'myChart'）.getContext（'2d'）；
var myChart=新图表（ctx{
键入：“行”，
数据：{
标签：时间数组，
数据集：[{
标签：“湿度”，
数据：测量值数组，
背景颜色：“rgba（255153,0,0.4）”
}]
},
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}],
xAxes：[{
键入：“时间”，
时间：{
解析器：“YYYY-MM-DD HH:MM:ss”，
单位：分钟，
显示格式：{
“分钟”：“YYYY-MM-DD HH:MM:ss”，
“小时”：“YYYY-MM-DD HH:MM:ss”
}
},
滴答声：{
资料来源：“数据”
}
}]                    
}
}
});
});

非常感谢：）它正在处理这些数据。尽管我的工作代码中的js错误保持不变，但至少图表代码开始工作。我想我现在需要提出另一个关于js错误的问题。再次感谢！