График. js с графиком продолжительности по датам - PullRequest
Новая
       69

График. js с графиком продолжительности по датам

0 голосов
/ 21 марта 2020

Я пытаюсь создать диаграмму с датами (MMMM DD, YYYY) по оси x и продолжительностью (h:mm:ss) по оси y. Приведенный ниже код поддерживает даты (x), но не продолжительность (y). 

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [moment("2009-04-11").format('MMMM DD, YYYY')],
        datasets: [{
            data: [{
                x: "2009-04-11",
                y: "01:20"
            }],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
            type: 'time',
                time: {
                    unit: 'minute'
                }
            }]
        }
    }
});

1 Ответ

0 голосов
/ 21 марта 2020

Следующий пример иллюстрирует, как это можно сделать. Я предполагаю, что y значение '01:20' из вашего кода имеет формат 'HH:mm'. 

const data = [
  { x: '2009-04-11', y: '01:20' },
  { x: '2009-05-02', y: '01:40' },
  { x: '2009-05-18', y: '01:10' }
];

new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    datasets: [{
      label: 'My Dataset',
      data: data.map(o => ({ x: o.x, y: moment.duration(o.y) })),
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      borderColor: 'rgba(255, 99, 132, 1)',
      borderWidth: 1
    }]
  },
  options: {
    tooltips: {
      callbacks: {       
        label: (tooltipItem, data) => moment.utc(data.labels[tooltipItem.index]).format('HH:mm')
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
          stepSize: 1_200_000,
          callback: v => moment.utc(v).format('HH:mm')
        }        
      }],
      xAxes: [{
        type: 'time',        
        time: {
          unit: 'days',
          displayFormats: {
            days: 'MMMM DD, YYYY'
          }
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.3.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>
...