javascript - 如何根据chart.js中数据的开始时间和结束时间日期选择器之间的时间间隔格式化x轴？

Question

您好，我是 javascript 新手。我有来自 API 的数据的 chart.js，如下所示：

  .....//datepicker code......

  $.ajax({
  method: "GET",
  url: endpoint,
  data: {
  startDate: startDate,
  endDate: endDate
  },
  success: function(data){
  //get data by fields
  var accelero_x = [], timestamp = [];
  for (var i=0; i<data.length; i++){
  accelero_x.push(data[i].accelero_x);
  timestamp.push(data[i].timestamp);
  }
  //plot the chart
  var ctx = document.getElementById("accelero_xChart").getContext('2d');
  var accelero_xChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: timestamp,
        datasets: [{
            label: 'accelero-x (mV/g)',
            data: accelero_x,
            backgroundColor: [
                '#ff000000'
            ],
            borderColor: [
            '#331698'
            ],
            pointBackgroundColor: '#331698',
            borderCapStyle: 'round',
            borderWidth: 3
        }]
    },
    options: {
        reponsive: true,
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:false,
                    stepSize:0.1
                },
                  scaleLabel: {
                  display:     true,
                  labelString: 'accelero-x (mV/g)'
              }
            }],
            xAxes: [{

                    display: true,
                    type: "time",
                    time: {
                          min: moment(startDate).toDate(),//Date object type
                          max: moment(endDate).toDate()//Date object type
                    },
                  scaleLabel: {
                  display:     true,
                  labelString: 'Time (hour)'
              }
            }]
        }
    }
  });
  },
  error: function(error_data){
  console.log(error_data)
  } 

  });

我的图表现在显示每 2 小时的 x 轴。但是我想要不同的格式，具体取决于日期选择器中图表中数据的时间startDate和endDate时间。startDate如果我在日期选择器和日期选择器之间选择超过两天endDate，我希望设置格式只显示日期，而不是小时。

例如，当我选择从 5 月 7 日到 5 月 8 日的日期时，x 轴将被格式化为每 2 小时（HH:MM例如：01:00、03:00、05:00 等）。但是当我选择从 5 月 7 日到 5 月 9 日的日期时，x 轴将被格式化为日期（例如：5 月 7 日、5 月 8 日、5 月 9 日）。我怎样才能做到这一点？

标签： javascriptchartsdatepickerchart.jsmomentjs