javascript - 当值为空时删除 ChartJS 中的空格
问题描述
我的问题是前一个问题的扩展(在此处输入链接描述)。
我删除了带有空关联数据的标签,但现在我想在这种情况下删除空格(在这个例子中我左边有空格)。
我需要处理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>
推荐阅读
- python - Pip 安装到一个文件夹,但 jupyter 从另一个文件夹中提取包
- python - Seaborn 自动缩放 Y 轴
- javascript - 我如何在 React 中使用 Api?
- amazon-web-services - 外部 -IP 负载均衡器 aws
- reactjs - 如何在页面重新加载时保持文本选择?
- php - 如何将输入凭据与数据库凭据匹配而不在 laravel 8 中键入它们?
- entity-framework - 在同一视图中具有实体框架 2 对象的 MVC
- java - 在没有机器人类的任何地方粘贴
- javascript - 如何枚举js模块中定义的所有箭头函数(不是全局的)?
- c++ - 是否有 C++ 函数可以暂停恢复子进程?