javascript - Chart.js - 将数据集中的数据绑定(bind)到特定的图表标签

Question

我正在尝试在 Chart.js 中制作一个输出世界人口的图表(这只是我将用于不同项目的示例)，我的问题是其中一个国家没有population (Somethingistan)，我确实希望该国家/地区列在当前位置，但我希望人口“跳过”它，有什么办法可以做到这一点吗？

这是我在制作图表

new Chart(document.getElementById("bar-chart"), {
    type: 'bar',
    data: {
        labels: ["Africa", "Asia", "Europe", "Somethingistan", "North America"],
        datasets: [
            {
                label: "Population (millions)",
                backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
                data: [2478,5267,734,784,433]
            }
        ]
    },
    options: {
        legend: { display: false },
        title: {
            display: true,
            text: 'Predicted world population (millions) in 2050'
        }
    }
});

这个方法我也试过了:

data: [{x:"Africe", y:2478},{x:"Asia", y:5267},{x:"Europa", y:734},{x:"North America", y:784}]

但我不认为它会起作用，但基本上这就是我想要实现的，将数据绑定(bind)到特定标签。

Answer 1

绘制图表时需要两个数组 --> labels & data

每个数组应该有相同数量的元素，
data 数组中的第一个元素，将“绑定(bind)”到 labels 数组中的第一个标签

如果标签没有值，就使用null

labels: ['Africa', 'Asia', 'Europe', 'Somethingistan', 'North America']

data: [2478,5267,734,null,784]

在上面的片段中，

2478 将绑定(bind)到 'Africa'
null 将绑定(bind)到 'Somethingistan'

请参阅以下工作片段...

window.onload = function () {
  new Chart(document.getElementById('bar-chart'), {
    type: 'bar',
    data: {
      labels: ['Africa', 'Asia', 'Europe', 'Somethingistan', 'North America'],
      datasets: [{
        label: 'Population (millions)',
        backgroundColor: ['#3e95cd', '#8e5ea2','#3cba9f','#e8c3b9','#c45850'],
        data: [2478,5267,734,null,784]
      }]
    },
    options: {
      legend: {
        display: false
      },
      title: {
        display: true,
        text: 'Predicted world population (millions) in 2050'
      }
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<div class="container">
  <canvas id="bar-chart"></canvas>
<div>