Chart.js線グラフ変更x軸別離

Question

私は現在、JSON形式でMySQLデータベースからデータを読み取り、chart.js線グラフでこのデータを表示するシステムを作成しています。それらが送信機毎分から受信されたときの値がデータベースに挿入されます。フォーマットのデータ値は（MySQLのDATETIME）、温度および湿度をDateTimeOfRecordingれます。グラフを取得してデータを表示することができました。

しかし、タイムスタンプ間のグラフィカルな別離は関係なく、時間差は、それらの間にあるもの、同じではありません。データの記録を逃している場合ように、それらをスケーリングする方法はあり、例えば、その後、ギャップは次の値が後に直接配置される代わりに、チャートに作成されますか？

これは、グラフを作成するための私の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', 
         } 
        }], 
       }, 
      } 
     });