Как отформатировать ось X в зависимости от того, как долго между начальным и конечным временем datepicker данных в диаграмме. js? - PullRequest
Новая
       92

Как отформатировать ось X в зависимости от того, как долго между начальным и конечным временем datepicker данных в диаграмме. js?

0 голосов
/ 29 мая 2020

Здравствуйте, я новичок в javascript. У меня есть диаграмма. js с данными из API выглядит так: 

  .....//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)
  } 

  });

Моя диаграмма сейчас отображает оси x за 2 часа. Но мне нужны разные форматы в зависимости от того, сколько времени между startDate и endDate данными на графике из datepicker. Если я выберу более двух дней между startDate и endDate из datepicker, я хочу, чтобы формат отображал только дату, а не часы.

Например, когда я выбираю дату с 7 мая по 8 Может, оси x будут форматироваться за 2 часа (HH:MM пример: 01:00, 03:00, 05:00 и т. Д.). Но когда я выбираю дату с 7 мая по 9 мая, оси x будут отформатированы в дату (например: 7 мая, 8 мая, 9 мая). Как я могу это сделать?

...