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

Question

我目前正在创建一个系统以从 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)
    {

    }
});

});

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',
                        }
                     }],
               },
            }
        });