時間軸に最初のグリッド線と目盛りラベル（unitStepSize）のみを表示したグラフ

Question

温度と時間の簡単な折れ線グラフを表示しようとしています。データセットには10​​分間隔で温度と時間があります。時刻はHH：mm形式です。 グラフは正しく表示されていますが、左軸、右軸、最初のティック時間値とグリッド線のみが表示されています。

私のデータは次のようになります。私は左のグリッド線と12時10時その後、12：00つのラベルとしてラベル軸、右軸上の13時30分までに何を得る 12:00 20.1 12:10 20.3 12:20 20.5 ... 13:20 21 13:30 21.4

。

unitStepSizeを省略すると、1分ごとに目盛りと目盛りが表示されます（混み合っています）。だから、明らかに私はこのパラメータと何か関係がありません。

var myChart = new Chart(ctx, 
    { 
     type: 'line', 
     data: data, 
     options : 
     { 
     responsive:false, 
     maintainAspectRatio: false, 
     scales: 
     { 
      xAxes: [ 
      { 
       type: 'time', 

       scaleLabel: 
       { 
       display: true, 
       labelString: 'Time' 
       }, 
       time: 
       { 
       unit: 'minute', 
       unitStepSize: '10', 
       format: "HH:mm", 
       displayFormats: 
       { 
        minute: 'HH:mm', 
        hour: 'HH:mm' 
       } 
       } 
      }], 
      yAxes: [ 
      { 
       scaleLabel: 
       { 
       display: true, 
       labelString: 'Temp' 
       }, 
       ticks: { 
       max: 25, 
       min: 15, 
       stepSize: 1 
      } 

      }] 
     } 
     } 
    }); 

Answer 1

あなたは文字列としてunitStepSize値を渡している、ので、あなたが現在直面している問題が原因となっています。

数字であり、引用符（''）はありません。

---

var ctx = document.querySelector('#canvas').getContext('2d'); 
 
var myChart = new Chart(ctx, { 
 
    type: 'line', 
 
    data: { 
 
     labels: ['12:00', '12:10', '12:20', '13:20', '13:30'], 
 
     datasets: [{ 
 
      label: 'Temperatures', 
 
      data: [20, 21, 22, 21, 23], 
 
      backgroundColor: 'rgba(75,192,192, 0.4)', 
 
      borderColor: '#4bc0c0', 
 
      pointBackgroundColor: 'black', 
 
      tension: 0, 
 
      fill: false 
 
     }] 
 
    }, 
 
    options: { 
 
     scales: { 
 
      xAxes: [{ 
 
       type: 'time', 
 
       scaleLabel: { 
 
        display: true, 
 
        labelString: 'Time' 
 
       }, 
 
       time: { 
 
        unit: 'minute', 
 
        unitStepSize: 10, 
 
        format: "HH:mm", 
 
        displayFormats: { 
 
         minute: 'HH:mm', 
 
         hour: 'HH:mm' 
 
        } 
 
       } 
 
      }], 
 
      yAxes: [{ 
 
       scaleLabel: { 
 
        display: true, 
 
        labelString: 'Temp' 
 
       }, 
 
       ticks: { 
 
        max: 25, 
 
        min: 15, 
 
        stepSize: 1 
 
       } 
 
      }] 
 
     } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
 
<canvas id="canvas"></canvas>