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

Question

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

Answer 1

Is there a way to have a minimum bar length but exclude zero values or certain values in general?

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>

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

Bar chart with min height and zero values - ChartJs

javascript

chart.js