Javascript Chart.js折线图更改x轴分隔

Javascript Chart.js折线图更改x轴分隔,javascript,mysql,charts,chart.js,Javascript,Mysql,Charts,Chart.js,我目前正在创建一个系统,从一个mysql数据库中读取json格式的数据,并在chart.js折线图中显示这些数据。当每分钟从变送器接收到这些值时,这些值将被插入数据库。格式中的数据值为DateTimeOfRecording(mysql DATETIME)、温度和湿度。我已经设法得到了显示数据的图表 然而,时间戳之间的图形分隔是相同的,无论它们之间的时间差是多少。是否有任何方法可以调整它们,例如,如果数据记录丢失,则会在图表中创建一个间隙,而不是将下一个值直接放在后面 这是我创建图表的javasc

我目前正在创建一个系统,从一个mysql数据库中读取json格式的数据,并在chart.js折线图中显示这些数据。当每分钟从变送器接收到这些值时,这些值将被插入数据库。格式中的数据值为DateTimeOfRecording(mysql DATETIME)、温度和湿度。我已经设法得到了显示数据的图表

然而,时间戳之间的图形分隔是相同的,无论它们之间的时间差是多少。是否有任何方法可以调整它们,例如,如果数据记录丢失,则会在图表中创建一个间隙,而不是将下一个值直接放在后面

这是我创建图表的javascript文件:

$(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时间格式?