Chart.js：数据集绑定特定图表标签及跳过缺失数据的方法

嘿，这个需求完全能搞定！Chart.js里用null占位就能完美实现你的要求——既能保留"Somethingistan"在标签列表里的原有位置，又不会渲染对应的柱状条。

具体操作步骤 #

1. 定位到你data.labels数组中"Somethingistan"对应的索引位置
2. 在data.datasets的data数组里，把对应索引的值替换成null

完整示例代码 #

new Chart(document.getElementById("bar-chart"), {
  type: 'bar',
  data: {
    labels: ["Africa", "Asia", "Somethingistan", "Europe", "South America"],
    datasets: [{
      label: '全球人口（百万）',
      backgroundColor: ['#3e95cd', '#8e5ea2','#3cba9f','#e8c3b9','#c45850'],
      data: [1400, 4700, null, 740, 430] // 这里对应Somethingistan的位置用null占位
    }]
  },
  options: {
    responsive: true,
    scales: {
      y: {
        beginAtZero: true,
        title: {
          display: true,
          text: '人口（百万）'
        }
      },
      x: {
        title: {
          display: true,
          text: '地区/国家'
        }
      }
    }
  }
});

原理说明 #

Chart.js会自动忽略数据数组中的null值，不会渲染对应的柱状条，但标签列表里的位置会完整保留，完全符合你要的效果。如果有多个数据集，只需要在每个数据集的对应索引位置都设为null即可，保证标签和数据的索引一一对应。

要是你需要调整标签的样式或者其他细节，可以在options里进一步配置，但核心的解决方案就是用null占位这个方法。

内容的提问来源于stack exchange，提问作者peaceduck