Блог

Главная - Вопросы по программированию - Проблемы с синтаксическим анализом формата времени Moment и ChartJS

Проблемы с синтаксическим анализом формата времени Moment и ChartJS

#javascript #chart.js #momentjs #datetime-conversion

#javascript #chart.js #momentjs #дата-время-преобразование

Вопрос:

Я пытаюсь имитировать формат диаграммы Ганна, используя функцию плавающей строки в ChartJS 2.9. До сих пор мне удавалось сделать что-то подобное с линейной диаграммой и некоторым творческим изгибом ChartJS, но в нем были серьезные недостатки, и он функционировал не так, как мне было нужно.

Вот что у меня есть прямо сейчас, что работает, то есть просто использует простой набор данных с целыми числами:

 var temp = '{ "EmpLst": {"0" : "No Name","1" : "No Name2"},"dateData" : [{"x": "2021-1-6", "y": "2021-2-16"},{"x": "2021-1-31", "y": "2021-5-19"},{"x": "2020-11-2", "y": "2020-12-16"},{"x": "2020-12-20", "y": "2021-1-7"}]}';

var parsedJSon = JSON.parse(temp);
var empNames = Object.values(parsedJSon.EmpLst);


var data = {
  type: 'horizontalBar',
  data: {
    labels: empNames,
    datasets: [{
      label: 'data',
      data: [
        [-3, 0],
        [1, 4]
      ],
      backgroundColor: 'lightblue'
    }, {
      label: 'data',
      data: [
        [1, 3],
        [6, 8]
      ],
      backgroundColor: 'lightblue'
    }]
  },
  options: {
    responsive: true,
    legend: {
      position: 'top',
    },
    title: {
      display: true,
      text: 'Horizontal Floating Bars'
    }
  }
};


var chart = new Chart(document.getElementById('deviceOnChart').getContext('2d'), data); 
 <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<div id="chartTarget" style="height: 160px; width: 100%;">
  <canvas id="deviceOnChart" width="600" height="160" style="display: block; height: 160px; width: 600px;"></canvas>
  <div style="opacity:0;" class="chartTooltip center">
  </div>
</div>

Что ж, верный моде, я каким-то образом исправил свою первоначальную проблему. Теперь я не могу получить значения осей x для format. Вот код, который у меня есть сейчас ниже. Я полагаю, основываясь на документах ChartJS, что у меня правильно настроен объект time, и я включил все параметры DisplayFormat.

Я потратил много времени на написание этого вопроса в поисках чего-то, что я, возможно, пропустил с точки зрения данных, относительно того, почему метки не будут форматироваться.

 var temp = '{ "EmpLst": {"0" : "No Name","1" : "No Name2"},"dateData" : [{"x": "2021-01-06", "y": "2021-02-16"},{"x": "2021-01-31", "y": "2021-05-19"},{"x": "2020-11-2", "y": "2020-12-16"},{"x": "2020-12-20", "y": "2021-01-07"}]}';

var parsedJSon = JSON.parse(temp);
var empNames = Object.values(parsedJSon.EmpLst);
var dateData = Object.values(parsedJSon.dateData);

var dataSets = [];

for (var i1 = 0; i1 < dateData.length; i1  ) {
  dataSets.push({
    label: 'data',
    data: [
      [moment(dateData[i1].x, 'YYYY-MM-DD'), moment(dateData[i1].y, 'YYYY-MM-DD')],
      [moment(dateData[i1   1].x, 'YYYY-MM-DD'), moment(dateData[i1   1].y, 'YYYY-MM-DD')]
    ],
    backgroundColor: 'lightblue'
  });

  i1  
}


var data = {
  type: 'horizontalBar',
  data: {
    labels: empNames,
    datasets: dataSets
  },
  options: {
    responsive: true,
    legend: {
      position: 'top',
    },
    title: {
      display: true,
      text: 'Horizontal Floating Bars'
    },
    scales:{
    xAxes: [{
      type: 'time',
      time: {
        unit: 'month',
        displayFormats: {
          millisecond: 'MMM YY',
          second: 'MMM YY',
          minute: 'MMM YY',
          hour: 'MMM YY',
          day: 'MMM YY',
          week: 'MMM YY',
          month: 'MMM YY',
          quarter: 'MMM YY',
          year: 'MMM YY'
        }
      },
      ticks: {
        min: moment('2020-09-01', 'YYYY-MM-DD'),
        max: moment('2021-07-01', 'YYYY-MM-DD'),
      },
    }],
  }
  }
};


var chart = new Chart(document.getElementById('deviceOnChart').getContext('2d'), data); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<div id="chartTarget" style="height: 160px; width: 100%;">
  <canvas id="deviceOnChart" width="600" height="160" style="display: block; height: 160px; width: 600px;"></canvas>
  <div style="opacity:0;" class="chartTooltip center">
  </div>
</div>

Я, вероятно, что-то просматриваю, но не могу понять, что это такое.

Ответ №1:

Хорошо, огромный момент. Я забыл добавить объект xAxes внутри scales…… Работает!

Метки: