Chart.js 中不同数量的标签和数据

Question

我正在尝试生成一个可能不具有相同数量的数据和标签的图表。

例如，我每个月都有一个标签，但也许三月或八月我没有值。

我尝试使用以下代码：

var options = {
  type: 'bar',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
    datasets: [{
      label: 'Test',
      backgroundColor: 'red',
      data: [{
        'x': 'Apr',
        'y': 40
      }, {
        'x': 'July',
        'y': 70
      }, {
        'x': 'Dec',
        'y': 120
      }]
    }]
  },
  options: {
    responsive: true,
    legend: {
      position: 'top',
    },
    title: {
      display: true,
      text: 'My Test'
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
}

var ctx = document.getElementById('canvas').getContext('2d');
new Chart(ctx, options);

但它在图像中显示的值的位置错误。

我怎样才能解决这个问题？

Answer 1

但它在图像中显示的值的位置错误

这是因为indexes您提供的数据的 对应于标签的前 3 个值。

解决方案#1：

为了解决这个问题，您可以通过为数据中缺少的点提供占位符值来使标签的长度与数据集的长度相等。

如果您不希望 Chartjs 以这种方式显示图表数据，请勿使用零作为数据集中不存在的值的占位符。[请参阅指示零值的短灰色区域。]

因此，处理这个问题的更好方法是提供null值。请参阅下面的工作示例。

const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
const data = [{'x':'Apr', 'y':40},{'x':'July', 'y':70},{'x':'Dec', 'y':120}];

const filledMonths = data.map((month) => month.x);
const dataset = labels.map(month => {
  const indexOfFilledData = filledMonths.indexOf(month);
	if( indexOfFilledData!== -1) return data[indexOfFilledData].y;
  return null;
});
console.log(dataset);

解决方案#2：在 Chartjs > 2.x 中，您可以使用time scale

如果您有大量数据并且不想对丢失的数据使用占位符值，则可以按照图表选项中的方式设置xAxes比例类型。time

这是使用此实现的答案。