我的问题是前一个问题的扩展（在此处输入链接描述）。
我删除了带有空关联数据的标签，但现在我想在这种情况下删除空格（在这个例子中我左边有空格）。
我需要处理min并max勾选选项吗？
<canvas id="myChart" width="200" height="200"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
let obj = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
spangaps: true,
label: 'Exceptionnel',
data: [1, 2, 3, 4, 5, 6, null, 5, null, null, null, null]
}]
};
var myChart = new Chart(ctx, {
type: 'bar',
data: obj,
options: {
scales: {
xAxes: [{
offset: true,
gridLines: {
display: true
},
ticks: {
callback: function (value, index, values) {
var dataValue = obj.datasets[0].data;
if (dataValue[index]) {
return values[index];
}
}
}
}]
}
}
});
</script>
您认为示例左侧的空格实际上是一个不可见的值 1 条。这可以通过定义 optionyAxes.ticks.beginAtZero: true或也可以解决yAxes.ticks.min: 0。
yAxes: [{
ticks: {
beginAtZero: true
}
}],
如果您想从 中删除前导null条目data，可以按如下方式完成。该Array.shift()方法从数组中删除第一个元素。
while(data[0] == null) {
data.shift(); // remove leading null
labels.shift(); // remove corresponding label
}
要同时null从 中删除尾随条目data，您可以按以下步骤操作。该Array.pop()方法从数组中删除最后一个元素。
while(data[data.length-1] == null) {
data.pop(); // remove tailing null
labels.pop(); // remove corresponding label
}
重要的是
labels，每次从 中删除条目时，也要始终从 中删除相应的条目data。
请在下面查看您修改后的代码。
const labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
const data = [1, 2, 3, 4, 5, 6, null, 5, null, null, null, null];
while(data[0] == null) {
data.shift(); // remove leading null
labels.shift(); // remove corresponding label
}
while(data[data.length-1] == null) {
data.pop(); // remove tailing null
labels.pop(); // remove corresponding label
}
var myChart = new Chart('myChart', {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'Exceptionnel',
data: data
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
offset: true,
gridLines: {
display: true
}
}]
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句