时间戳

首页 > 解决方案 > 如何设置条形图的最小高度

html - 如何设置条形图的最小高度

问题描述

我正在显示一个图表，但是当值较小时，图表没有显示我想要一个最小高度，以便可以显示它们。

我正在使用 chartjs 来显示图表。

      My html : 
    <canvas id="chartContainer"></canvas>

My angular code:

  $scope.options = {
        onClick: SPEND_BY_SUPPLIER,
        tooltips: {
            callbacks: {
                label: function(tooltipItem, data) {
                    var label = data.datasets[tooltipItem.datasetIndex].label || '';

                    if (label) {
                        label += ': ';
                    }
                    label += tooltipItem.yLabel;
                    return label + " " + $scope.SPEND_SUP_LIST[0].CURRENCY_CODE;
                }
            }
        },
        scales: {
            xAxes: [
                {
                    ticks: {
                        callback: function (label, index, labels) {
                            return label +" " + $scope.SPEND_SUP_LIST[0].CURRENCY_CODE;
                        }
                    },
                    scaleLabel: {
                        display: true,
                    }
                }
            ]
        }
    };
    new Chart(document.getElementById("chartContainer"), {
        type: 'horizontalBar',
        data: {
            labels: $scope.label_SPEND_SUP_LIST,
            datasets: [
              {
                  backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"],
                  data: $scope.data_SPEND_SUP_LIST
              }
            ]
        },
        options: $scope.options,
    });

我想为那些值非常小的图形设置最小高度，请支持。

标签： htmlangularjschart.js

解决方案

您的问题不是很清楚，但也许您正在寻找beginAtZero勾选选项。

如果未将其设置为，true那么（至少）您的一个点将是“不可见的”，因为它将位于图表区域的边界上。这是因为 Chart.js 默认使用数据集中的最小值作为min比例值。

options: {
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true
      }
    }]
  }
}

推荐阅读