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

vnjpjtjt  于 2022-11-07  发布在  Chart.js
关注(0)|答案(1)|浏览(164)

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

up9lanfz1#

是否有一种方法可以获得最小条长度,但通常排除零值或某些值?
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>

相关问题