Chart.js中

Question

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

例如，我每个月都有一个标签，但也许3月或8月没有标签。

我尝试使用以下代码：

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。

这里an answer使用此实现。

---

Answer 2

如果任何月份没有任何价值，请提供0作为同一月份的数据。

var options = {
            type: 'bar',
            data: {
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
                datasets:[
                    {
                        label: 'Test',
                        backgroundColor: 'red',
                        data: [0,0,0,40,0,0,70,0,0,0,0,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 3

Chart.js支持Moment.js接受的所有格式（“ MMM YYYY”）。 仅添加年份就可以解决问题。