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个间隔定义。我想绘制2条线，但第二条线＆＃34;更短的＆＃34;比第一个。

甚至更好的另一个数据仅在给定范围的子集上定义，例如：

 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]
  }]
}

这是一个实时工作片段：

＆＃13;

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
});

＆＃13;

.container {
  width: 80%;
  margin: 20px auto;
}

.p {
  text-align: center;
  font-size: 14px;
  padding-top: 140px;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: