Блог

Я получаю данные о времени, которые я хочу отобразить в столбчатой диаграмме с накоплением. Я смог построить даты по осям x в диаграмме js с форматом времени в соответствии с документацией. Я хочу отображать время в формате HH: mm по оси y. Более того, данные, которые я получаю, находятся в формате HH: mm не на всю дату.

Я искал его везде и, похоже, не могу найти жизнеспособное решение. В документации chart js указано, что у нас должно быть действительное время в нашей диаграмме js для отображения, но я получаю данные в формате HH: mm.

 function stackedBarChartForProject(){
  var dataPack1 = [11.2, 12.2, 1.59, 11.25, 1.45, 11.2, 11.2, 9.2, 18.2, 3.2, 11.2, 11.2];
  var dataPack2 = [9.05, 11.3, 9.05, 11.3, 9.05, 11.3, 9.05, 11.3, 9.05, 11.3, 9.05, 11.3];
  var dates = [moment(new Date('Tue, 30 Oct 2018')).format('YYYY-MM-DD'), moment(new Date('Mon, 29 Oct 2018')).format('YYYY-MM-DD'), moment(new Date('Sun, 28 Oct 2018')).format('YYYY-MM-DD'), moment(new Date('Sat, 27 Oct 2018')).format('YYYY-MM-DD'), moment(new Date('Fri, 26 Oct 2018')).format('YYYY-MM-DD'), moment(new Date('Thu, 25 Oct 2018')).format('YYYY-MM-DD'), moment(new Date('Wed, 24 Oct 2018')).format('YYYY-MM-DD'), moment(new Date('Tue, 23 Oct 2018')).format('YYYY-MM-DD'), moment(new Date('Mon, 22 Oct 2018')).format('YYYY-MM-DD'), moment(new Date('Sun, 21 Oct 2018')).format('YYYY-MM-DD'), moment(new Date('Sat, 20 Oct 2018')).format('YYYY-MM-DD'), moment(new Date('Fri, 19 Oct 2018')).format('YYYY-MM-DD')];
  if ($('#project_stacked_bar_chart_canvas').length) {
    var stackChart = document.getElementById("project_stacked_bar_chart_canvas");
    var myStackChart = new Chart(stackChart, {
      type: 'bar',
      data: {
        labels: dates,
        datasets: [
          {
            label: 'Bowser',
            data: dataPack1,
            backgroundColor: "rgba(55, 160, 225, 0.7)",
            hoverBackgroundColor: "rgba(55, 160, 225, 0.7)",
            hoverBorderWidth: 2,
            hoverBorderColor: 'lightgrey'
          },
          {
            label: 'Mario',
            data: dataPack2,
            backgroundColor: "rgba(225, 58, 55, 0.7)",
            hoverBackgroundColor: "rgba(225, 58, 55, 0.7)",
            hoverBorderWidth: 2,
            hoverBorderColor: 'lightgrey'
          },
        ]
      },
      options: {
        animation: {
          duration: 10,
        },
        scales: {
          xAxes: [{
            stacked: true,
            gridLines: { display: false },
            type: 'time',
            time: {
              displayFormats: {
                'millisecond': 'YYYY-MM-DD',
                'second': 'YYYY-MM-DD',
                'minute': 'YYYY-MM-DD',
                'hour': 'YYYY-MM-DD',
                'day': 'YYYY-MM-DD',
                'week': 'YYYY-MM-DD',
                'month': 'YYYY-MM-DD',
                'quarter': 'YYYY-MM-DD',
                'year': 'YYYY-MM-DD',
              }
            },
            ticks: {
              source: 'data'
            }
          }],
          yAxes: [{ 
            stacked: true
          }],
        },
        legend: {display: true}
      }
    });
  }
}
  

Я хочу отображать тики по оси y в формате HH: mm.