我在chartjs中有一个条形图,它显示四个不同的值。我还希望这些条形图有一个最小高度,这样小的值更容易看到。为此,我使用了minBarLength选项。问题是我不希望值为零的条形图受此选项的影响。
是否有一种方法可以获得最小条长度,但通常排除零值或某些值?
我使用chartjs版本3.7.1与数据标签插件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>
1条答案
按热度按时间up9lanfz1#
是否有一种方法可以获得最小条长度,但通常排除零值或某些值?
ChartJS将
0
视为一个值。为了让ChartJS知道不应该呈现该列,应该对空列使用
NULL
。