Диаграмма. js не отображает данные с накоплением с линейной осью и фиксированными шагами

Question

Я пытаюсь визуализировать гистограмму с накоплением с фиксированным размером шага по оси x. Это не работает так, как я предполагал. Итоговая диаграмма:

или:

В первой диаграмме данные отображается правильно, а ось x - нет. Вторая диаграмма имеет правильную ось x, но данные не отображаются. Первый - без явной установки типа оси. У второй есть явный тип оси «линейная». Я создал скрипку, демонстрирующую проблему: Fiddle . Разница между двумя версиями указана в строке 39.

new Chart(ctx, {
  type: 'bar',
  data: {
    labels: labels,
    datasets: [{
        label: 'Regular working hours',
        data: workingHoursRegularPart,
        backgroundColor: 'rgba(30,60,160,0.5)',
        borderColor: 'rgba(30,60,160)',
        borderWidth: 1
      },
      {
        label: 'Overtime',
        data: workingHoursOvertimeHours,
        backgroundColor: 'rgba(60,30,160,0.25)',
        borderColor: 'rgba(60,30,160)',
        borderWidth: 1
      }
    ]
  },
  options: {
    animation: false,
    legend: {
      display: false
    },
    responsive: true,
    scales: {
      xAxes: [{
        //type: 'linear',
        //position: 'bottom',
        stacked: true,
        ticks: {
          min: 1,
          max: 31,
          stepSize: 7
        }
      }],
      yAxes: [{
        stacked: true,
        ticks: {
          beginAtZero: true,
          min: 0,
          max: 16,
          stepSize: 2
        }
      }]
    }
  }

Answer 1

Возможно, вы хотите, чтобы метки в виде галочки правильно размещались под полосами, поэтому вам нужно определить gridLines.offsetGridLines: false. В этом случае вы можете просто определить пустую строку для меток, которые вы не хотите видеть.

Обратите внимание на свой измененный код ниже.

var labels = [];
var workingHoursRegularPart = [];
var workingHoursOvertimeHours = [];
for (var i = 0; i < 30; i++) {
  if (i == 0 || i == 29 || (i + 1) % 7 == 0) {
    labels.push(i + 1);
  } else {
    labels.push('');
  }
  workingHoursRegularPart.push(8);
  workingHoursOvertimeHours.push(1);
};

new Chart('dailyWorkingHoursChart', {
  type: 'bar',
  data: {
    labels: labels,
    datasets: [{
        label: 'Regular working hours',
        data: workingHoursRegularPart,
        backgroundColor: 'rgba(30,60,160,0.5)',
        borderColor: 'rgba(30,60,160)',
        borderWidth: 1
      },
      {
        label: 'Overtime',
        data: workingHoursOvertimeHours,
        backgroundColor: 'rgba(60,30,160,0.25)',
        borderColor: 'rgba(60,30,160)',
        borderWidth: 1
      }
    ]
  },
  options: {
    animation: false,
    legend: {
      display: false
    },
    responsive: true,
    scales: {
      xAxes: [{        
        stacked: true,
        gridLines: {
          offsetGridLines: false
        }
      }],
      yAxes: [{
        stacked: true,
        ticks: {
          beginAtZero: true,
          min: 0,
          max: 16,
          stepSize: 2
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="dailyWorkingHoursChart" height="80"></canvas>

Answer 2

Чтобы решить эту проблему, вы можете добавить второй xAxes и сделать первый скрытым (display: false).

xAxes: [{     
    display: false,
    stacked: true
  },
  {        
    type: 'linear',
    ticks: {
      min: 1,
      max: 31,
      stepSize: 7
    }
  }],

Пожалуйста, посмотрите на ваш измененный код ниже.

var labels = [];
var workingHoursRegularPart = [];
var workingHoursOvertimeHours = [];
for (var i = 0; i < 30; i++) {
  labels.push(i + 1);
  workingHoursRegularPart.push(8);
  workingHoursOvertimeHours.push(1);
};

new Chart('dailyWorkingHoursChart', {
  type: 'bar',
  data: {
    labels: labels,
    datasets: [{
        label: 'Regular working hours',
        data: workingHoursRegularPart,
        backgroundColor: 'rgba(30,60,160,0.5)',
        borderColor: 'rgba(30,60,160)',
        borderWidth: 1
      },
      {
        label: 'Overtime',
        data: workingHoursOvertimeHours,
        backgroundColor: 'rgba(60,30,160,0.25)',
        borderColor: 'rgba(60,30,160)',
        borderWidth: 1
      }
    ]
  },
  options: {
    animation: false,
    legend: {
      display: false
    },
    responsive: true,
    scales: {
      xAxes: [{     
        display: false,
        stacked: true
      },
      {        
        type: 'linear',
        ticks: {
          min: 1,
          max: 31,
          stepSize: 7
        }
      }],
      yAxes: [{
        stacked: true,
        ticks: {
          beginAtZero: true,
          min: 0,
          max: 16,
          stepSize: 2
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="dailyWorkingHoursChart" height="80"></canvas>