在条形图(chartjs)中添加垂直滚动条

Question

我有一个水平条形图，可能包含 1 到 300 个条形之间的任何内容，具体取决于仪表板中的选择。当显示许多条形时，它们太细了。我想为栏设置最小宽度，并有一个垂直滚动条来查看那些不适合第一页的滚动条。

   <div class="row">
   <div class="{{chartType === 'devicesByNetwork' ? 'col-10 net' : 
   'col-12 chartWrapper'}}" style="height:auto; margin: 0 auto;" 
   *ngIf="showChart">
  <div style="max-height:250px; overflow-y: scroll; position: 
  relative"></div>
   <canvas class="devicesByNetwork" *ngIf="chartType === 
    'devicesByDept'" style="margin-top:30px;"  
       height="250px"baseChart
        [datasets]="barChartData"
        [labels]="barChartLabels"
        [options]="barChartOptionsDevicesByDept"
        [legend]="barChartLegend"
        [chartType]="barChartType"
        [colors]="myColors"
        (chartHover)="chartHovered($event)"
        (chartClick)="chartClicked($event)"></canvas>
      </div>

Answer 1

我们无法为图表条设置最小宽度或高度，因此我们将设置包含div 的高度。在 HTML 中：

    <div style="height:250px; overflow-y: scroll; position: relative">
            <div id="canvasContainer">
                    <canvas></canvas>
            </div>
    </div>

然后添加一个 Javascript 函数，该函数根据可用的柱数和每个柱的最小高度计算canvasContainerdiv 的高度：

    function calcHeight (numOfBars) {
            var maxHeightOfChart = 250;
            var minHeight = 40; //setting the min height of the bar + margin between
            var chartHeight = minHeight * numOfBars > maxHeightOfChart ? minHeight * numOfBars : maxHeightOfChart;
            document.getElementById("canvasContainer").style.height = chartHeight.toString()+"px";
    }