如何确定此水平图的宽度和高度

Question

我有一个用图表js水平生成的图表。我遇到的问题是数据更改时宽度和高度没有固定。

以下是一些图片：

JS代码：

ListNomCo = ["a", "b", "c", "d"];
ListDataCo = [1, 2, 3, 4];
myHorizontalChartBar = new Chart($("#myHorizontalChartBar")[0], {
  type: 'horizontalBar',
  data: {
    labels: ListNomCo,
    datasets: [{
      label: 'Dossiers',
      data: ListDataCo,
      backgroundColor: '#FD8B6F',
      borderColor: '#D54A2C',
      borderWidth: 1,
      width: 2
    }]
  },
  options: {
    scales: {
      xAxes: [{
        ticks: {
          beginAtZero: true,
          display: false
        },
        gridLines: {
          display: false
        },
      }],
      yAxes: [{
        padding: 20,
        ticks: {
          beginAtZero: true
        },
        gridLines: {
          display: false
        },
        categoryPercentage: 1.5,
        barPercentage: 0.3,
        categorySpacing: 0
      }]
    },
    maintainAspectRatio: false,
    legend: {
      display: false
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div class="row mx-0 mt-3">
  <div class="col-7" id="containerChartFiltrage">
    <canvas id="myHorizontalChartBar" style="height:300px;position: relative;top: 50%;" class="chart"></canvas>
  </div>
</div>

如何固定图表的宽度以处理任何类型的数据？

Answer 1

如果您希望它与视口大小相关，则应将以下类添加到所有子元素中：

daemon.json

我希望这会有所帮助！

下一次；只显示重要的代码，然后将代码片段放在一个代码片段中，这样您的帖子就更容易理解，而不是聚集在一起。