为什么将chart.js图表​​放在字段集中而不是div会改变响应行为

问题描述

使用2个内联div进行这种简单的两列设计。

在第一列中放置一个图表。

如果此示例中的图表包含在div中，则它在扩展和减小浏览器窗口的大小时具有很好的响应性。

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx,{
    type: 'bar',data: {
        labels: ['Red','Blue','Yellow','Green','Purple','Orange'],datasets: [{
            label: '# of Votes',data: [12,19,3,5,2,3],backgroundColor: [
                'rgba(255,99,132,0.2)','rgba(54,162,235,'rgba(255,206,86,'rgba(75,192,'rgba(153,102,255,159,64,0.2)'
            ],borderColor: [
                'rgba(255,1)',1)'
            ],borderWidth: 1
        }]
    },options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

* {
  -webkit-Box-sizing: border-Box;
  -moz-Box-sizing: border-Box;
  Box-sizing: border-Box;
}
*:before,*:after {
  -webkit-Box-sizing: border-Box;
  -moz-Box-sizing: border-Box;
  Box-sizing: border-Box;
}

.parent {
  border: 1px solid blue;
  width: 100%;
}

.parent > div {
  display: inline-block;
  border: 1px solid red;
  width: 50%;
  vertical-align: top;
  
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
<div class="parent">
<div>
  <div>
    <canvas id="myChart"></canvas>
  </div>
</div><div>Col2</div>
</div>

如果图表包含在字段集中（如以下示例所示），则其初始大小会很大，并且在扩展时会响应，但在减小浏览器大小时不会调整大小。

注意：您需要运行“全屏”代码片段以查看行为。

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx,*:after {
  -webkit-Box-sizing: border-Box;
  -moz-Box-sizing: border-Box;
  Box-sizing: border-Box;
}

.parent {
  border: 1px solid blue;
  width: 100%;
}

.parent > div {
  display: inline-block;
  border: 1px solid red;
  width: 50%;
  vertical-align: top;
  
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
<div class="parent">
<div>
  <fieldset>
    <canvas id="myChart"></canvas>
  </fieldset>
</div><div>Col2</div>
</div>

我正在Windows的Chrome 84.0.4147.89中进行测试。

为什么要这样做，它是期望行为，如果是的话，它遵循什么规则，还是一个错误？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）