Javascript Chart.js折线图更改x轴分隔
我目前正在创建一个系统,从一个mysql数据库中读取json格式的数据,并在chart.js折线图中显示这些数据。当每分钟从变送器接收到这些值时,这些值将被插入数据库。格式中的数据值为DateTimeOfRecording(mysql DATETIME)、温度和湿度。我已经设法得到了显示数据的图表 然而,时间戳之间的图形分隔是相同的,无论它们之间的时间差是多少。是否有任何方法可以调整它们,例如,如果数据记录丢失,则会在图表中创建一个间隙,而不是将下一个值直接放在后面 这是我创建图表的javascript文件:Javascript Chart.js折线图更改x轴分隔,javascript,mysql,charts,chart.js,Javascript,Mysql,Charts,Chart.js,我目前正在创建一个系统,从一个mysql数据库中读取json格式的数据,并在chart.js折线图中显示这些数据。当每分钟从变送器接收到这些值时,这些值将被插入数据库。格式中的数据值为DateTimeOfRecording(mysql DATETIME)、温度和湿度。我已经设法得到了显示数据的图表 然而,时间戳之间的图形分隔是相同的,无论它们之间的时间差是多少。是否有任何方法可以调整它们,例如,如果数据记录丢失,则会在图表中创建一个间隙,而不是将下一个值直接放在后面 这是我创建图表的javasc
$(document).ready(function(){
$.ajax({
url : "http://"+self.location.host+"/chartjs/tests/ChartDataTest.php",
type : "GET",
success : function(data){
console.log(data);
var Temperature = [];
var RecordingDateTime = [];
var Humidity = [];
for(var i in data)
{
RecordingDateTime.push(data[i].RecordingDateTime);
Temperature.push(data[i].Temperature);
Humidity.push(data[i].Humidity);
}
var chartdata =
{
labels: RecordingDateTime,
datasets:
[
{
label: "Temperature",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(230, 0, 0, 0.75)",
borderColor: "rgba(230, 0, 0, 1)",
pointHoverBackgroundColor: "rgba(230, 0, 0, 1)",
pointHoverBorderColor: "rgba(230, 0, 0, 1)",
data: Temperature
},
{
label: "Humidity",
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: Humidity
}
]
};
var ctx = $("#mycanvas");
var LineGraph = new Chart(ctx,
{
type: 'line',
data: chartdata
});
},
error : function(data)
{
}
});
}))
我认为您需要将x轴指定为使用时间类型 试试这样的
var ctx = $("#mycanvas");
var LineGraph = new Chart(ctx,
{
type: 'line',
data: chartdata,
options: {
scales: {
xAxes: [
{
type: "time",
time: {
format: timeFormat,
round: 'minute',
}
}],
},
}
});
我认为您需要将x轴指定为使用时间类型 试试这样的
var ctx = $("#mycanvas");
var LineGraph = new Chart(ctx,
{
type: 'line',
data: chartdata,
options: {
scales: {
xAxes: [
{
type: "time",
time: {
format: timeFormat,
round: 'minute',
}
}],
},
}
});
非常感谢。我会给它一个机会什么是var时间格式?谢谢!我会给它一个GO什么是var时间格式?