Chart.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. 在这种情况下，你可以简单地定义一个空的字符串来表示你不想看到的tick标签。

请看下面您修改后的代码。

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>