javascript - Chart.js折线图改变x轴分离

Question

我目前正在创建一个系统，以 json 格式从 mysql 数据库读取数据，并将这些数据显示在 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)
    {

    }
});

});

Answer 1

我认为您需要将 x 轴指定为使用时间的类型。

尝试这样的事情......

var ctx = $("#mycanvas");
        var LineGraph = new Chart(ctx,
        {
            type: 'line',
            data: chartdata,
            options: {
               scales: {
                   xAxes: [
                     {
                        type: "time",
                        time: {
                           format: timeFormat,
                           round: 'minute',
                        }
                     }],
               },
            }
        });