具有最小高度和零值的条形图 - ChartJs

Question

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

Answer 1

有没有办法获得最小条形长度但通常排除零值或某些值？

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>