详细信息：
我正在使用Chart.js（http://www.chartjs.org/）在Tomcat服务器上显示.jsps中的响应式图表。似乎几乎无处不在。我正在设置画布的最大宽度并将图表设置为响应，因此当窗口调整大小时，它们可以调整大小以填充整个容器。
问题：
当我有一个包含两列图表的页面时，我认为右列正在压缩左列容器（和图表），但图表没有正确调整大小。请参阅Plunker，了解左栏中所有东西的压扁程度。我玩过维持宽高比/没有。我也尝试在窗口加载时运行.resize（），但它似乎也没有工作。 （宁愿不必这样做，因为我可能在左栏中有任意数量的图表，并且不想调整所有这些图表的大小）。任何建议都表示赞赏。
<html>
<head>
<script src="Chart.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<center>
<table width="98%" border="0" cellspacing="0" cellpadding="0" style="vertical-align: top">
<tbody>
<tr>
<td valign="top" align="center" colspan="2">
<table border="0" width="99%">
<tr>
<td valign="top" align="left" width="48%">
<table border=0 class="tableBoxed" width="98%">
<tr>
<td class="THCell" valign="top">
</td>
</tr>
<tr>
<td class="THCellChart" valign="top" align="right">
<style type="text/css">
#myChart_0{
width: 100% !important;
max-width: 1400px;
height: 350px !important;
}
</style>
Chart 1
<div>
<canvas id="myChart_0">
<script type="text/javascript">
var ctx = document.getElementById("myChart_0");
var myChart = new Chart(ctx, {
options: {
animation: {
animateScale:true
},
maintainAspectRatio: false,
responsive: true,
legend: {
display: false
},
tooltips: {
mode: 'label'
}
},
type: 'line',
data: {
labels: ['22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42'],
datasets: [{
label: ['Probability (%)'],
fill: false,
data: [3.600, 0, 0, 0, 0, 0, 0, 0, 4.100, 2, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
borderColor: '#00929F',
backgroundColor: '#00929F',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: '#F08000',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: '#00929F',
pointHoverBorderColor: '#F08000',
pointHoverBorderWidth: 2,
pointRadius: 2,
pointHitRadius: 4
}]
}
});
</script>
</canvas>
</div>
</td>
</tr>
</table>
</td>
<td valign="top" align="right" width="50%">
<table border=0 class="tableBoxed" width="98%">
<tr>
<td class="THCell" valign="top">
</td>
</tr>
<tr>
<td class="THCellChart" valign="top" align="right">
<style type="text/css">
#myChart_1{
width: 100% !important;
max-width: 1400px;
height: 350px !important;
}
</style>
Chart 2
<div>
<canvas id="myChart_1">
<script type="text/javascript">
var ctx = document.getElementById("myChart_1");
var myChart = new Chart(ctx, {
options: {
animation: {
animateScale:true
},
maintainAspectRatio: false,
responsive: true,
legend: {
display: false
},
tooltips: {
mode: 'label'
}
},
type: 'line',
data: {
labels: ['22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42'],
datasets: [{
label: ['Probability (%)'],
fill: false,
data: [3.600, 0, 0, 0, 0, 0, 0, 0, 4.100, 2, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
borderColor: '#00929F',
backgroundColor: '#00929F',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: '#F08000',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: '#00929F',
pointHoverBorderColor: '#F08000',
pointHoverBorderWidth: 2,
pointRadius: 2,
pointHitRadius: 4
}]
}
});
</script>
</canvas>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tbody>
</table>
</center>
<script>
function updateChart () {
myChart_0.resize();
}
window.onload (updateChart());
</script>
</body>
</html>
答案 0 :(得分：0)
所以我想我已经想到了这一点，希望如果有人偶然发现我可以提供帮助。
我知道使用表格进行网站布局是不好的做法，但我从中选择的代码已经存在，所以我坚持使用它。好吧，几个月后，当我添加Chart.js时，又回来咬我。将每个图表放在leftDiv和rightDiv类中使一切正常。