javascript - 如何为 Chart.js 数据提供空值？

Question

查看 this例如，似乎 labels.length 和每个 data.length 必须相等。

如果我想保留某些元素未定义怎么办？例如:

labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],

data1: [86,114,10 ,106,107,13,133,221,100,2478]

data2: [282,350,411,502]

如您所见，data2 仅针对前 4 个间隔定义。我想画两条线，但第二条比第一条“短”。

或者更好的是仅在给定范围的子集上定义的另一个数据，例如:

 data3: [null,null,null,null,107,13,133,null,null,null]

Answer 1

如果您希望标签具有空数据，您可以将 null 值传递给相应的数据索引，但它将被视为 0。

例如:

var barChartData = {
  labels: ["dD 1", "dD 2", "dD 3", "dD 4", "dD 5", "dD 6", "dD 7", "dD 8", "dD 9", "dD 10"],
  datasets: [{
    fillColor: "rgba(0,60,100,1)",
    strokeColor: "black",
    data: [125, null, 12, 52, 65, 20, null, 40, 70, 45]
  }]
}

这是一个实时工作片段:

var barChartData = {
  labels: ["dD 1", "dD 2", "dD 3", "dD 4", "dD 5", "dD 6", "dD 7", "dD 8", "dD 9", "dD 10"],
  datasets: [{
    fillColor: "rgba(0,60,100,1)",
    strokeColor: "black",
    data: [125, null, 12, 52, 65, 20, null, 40, 70, 45]
  }]
}

var index = 11;
var ctx = document.getElementById("canvas").getContext("2d");
var barChartDemo = new Chart(ctx).Bar(barChartData, {
  responsive: true,
  barValueSpacing: 2
});

.container {
  width: 80%;
  margin: 20px auto;
}

.p {
  text-align: center;
  font-size: 14px;
  padding-top: 140px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<div class="container">
  <h2>Chart.js Responsive Bar Chart Demo</h2>
  <div>
    <canvas id="canvas"></canvas>
  </div>
</div>