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

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

1 个答案: