我在 chartjs 中有一個條形圖，它顯示四個不同的值。我還希望這些條具有最小高度，以便更容易看到較小的值。為此，我使用了 minBarLength 選項。問題是我不希望值為零的條受到此選項的影響。
有沒有辦法獲得最小條形長度但通常排除零值或某些值？
我使用chartjs 3.7.1 版和datalabel 插件2.0.0。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js" integrity="sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js" integrity="sha512-R/QOHLpV1Ggq22vfDAWYOaMd5RopHrJNMxi8/lJu8Oihwi4Ho4BRFeiMiCefn9rasajKjnx9/fTQ/xkWnkDACg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<canvas id=chart1 height="75"></canvas>
<script>
let chart = document.getElementById('chart1').getContext('2d');
var dataset = {
"labels": ["OK", "Critical", "Warning", "Unknown"],
"datasets": [{
"label": "Example",
"minBarLength": "40",
"backgroundColor": ["rgba(58, 255, 0, 0.4)", 'rgba(255, 45, 0, 0.4)', 'rgba(255, 185, 0, 0.4)', 'rgba(161, 161, 161, 0.4)'],
"borderColor": ["rgb(58, 255, 0)", 'rgb(255, 45, 0)', 'rgb(255, 185, 0)', 'rgb(161, 161, 161)'],
"borderWidth": 2,
"fill": true,
"data": [34, 0, 1, 0],
}]
};
var myChart = new Chart(chart, {
plugins: [ChartDataLabels],
type: 'bar',
data: dataset,
options: {
indexAxis: 'x',
scales: {
y: {
gridLines: {
display: false
},
ticks: {
display: false
}
}
},
plugins: {
datalabels: {
display: function(context) {
return context.dataset.data[context.dataIndex] !== 0;
},
font: {
size: 20,
}
},
legend: {
labels: {
boxWidth: 0
}
}
}
}
});
</script>uj5u.com熱心網友回復：
有沒有辦法獲得最小條形長度但通常排除零值或某些值？
ChartJS 將0其視為一個價值。
要讓 ChartJS 知道不應該呈現這些列，您應該使用NULL空列。
"data": [34, NULL, 1, NULL],
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js" integrity="sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js" integrity="sha512-R/QOHLpV1Ggq22vfDAWYOaMd5RopHrJNMxi8/lJu8Oihwi4Ho4BRFeiMiCefn9rasajKjnx9/fTQ/xkWnkDACg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<canvas id=chart1 height="75"></canvas>
<script>
let chart = document.getElementById('chart1').getContext('2d');
var dataset = {
"labels": ["OK", "Critical", "Warning", "Unknown"],
"datasets": [{
"label": "Example",
"minBarLength": "40",
"backgroundColor": ["rgba(58, 255, 0, 0.4)", 'rgba(255, 45, 0, 0.4)', 'rgba(255, 185, 0, 0.4)', 'rgba(161, 161, 161, 0.4)'],
"borderColor": ["rgb(58, 255, 0)", 'rgb(255, 45, 0)', 'rgb(255, 185, 0)', 'rgb(161, 161, 161)'],
"borderWidth": 2,
"fill": true,
"data": [34, null, 1, null],
}]
};
var myChart = new Chart(chart, {
plugins: [ChartDataLabels],
type: 'bar',
data: dataset,
options: {
indexAxis: 'x',
scales: {
y: {
gridLines: {
display: false
},
ticks: {
display: false
}
}
},
plugins: {
datalabels: {
display: function(context) {
return context.dataset.data[context.dataIndex] !== 0;
},
font: {
size: 20,
}
},
legend: {
labels: {
boxWidth: 0
}
}
}
}
});
</script>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/483362.html
標籤：javascript 图表.js
上一篇：無法在無頭模式下啟動Chrome