如何解决为什么将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/chart.js@2.9.3/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/chart.js@2.9.3/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 举报,一经查实,本站将立刻删除。