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函数，该函数基于可用的条数和每个条的最小高度来计算canvasContainer div的高度：

    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";
    }

在条形图中添加垂直滚动条（chartjs）

1 个答案: