我有一个主 div,里面有两个 div,每个都有一个 Canvas 。我的问题是 Canvas 没有响应,当我调整浏览器大小时它会重叠。请看下图。
这是我的HTML 代码:
<div id="mainContainer">
<div id="leftcolumn">
<h2>
Canvass Graph1
</h2>
<canvas id="Canvass_One"></canvas>
</div>
<div id="rightcolumn">
<h2>Canvass Graph2</h2>
<canvas id="Canvass_Two"></canvas>
</div>
</div>
CSS 代码:
#mainContainer
{
width:100%;
height: 100%;
}
#leftcolumn
{
float:left;
display:inline-block;
width: -moz-calc(100% - 50%);
width: -webkit-calc(100% - 50%);
width: calc(100% - 50%);
height: 100%;
background: blue;
}
#rightcolumn {
float:left;
display:inline-block;
width: -moz-calc(100% - 50%);
width: -webkit-calc(100% - 50%);
width: calc(100% - 50%);
height: 100%;
background-color : red;
}
JS设置Canvass高宽
var ctx2 = $("#Canvass_One").get(0).getContext('2d');
ctx2.canvas.height = 300; // setting height of canvas
ctx2.canvas.width = 560; // setting width of canvas
var ctx1 = $("#Canvass_Two").get(0).getContext('2d');
ctx1.canvas.height = 300; // setting height of canvas
ctx1.canvas.width = 560; // setting width of canvas
Canvas :
同样,我的问题是当我最小化/调整浏览器窗口大小时, Canvas 重叠。感谢您的任何帮助。我的情况是我没有在我的 div 中使用图像,它只是一个带有图表 js 框架的纯 Canvas 来创建一个图形。
示例数据:
var barData = {
labels: ['CityA', 'CityB', 'CityC', 'CityD', 'CityF', 'CityG'],
datasets: [
{
label: '2010 customers #',
fillColor: '#382765',
data: [2500, 1902, 1041, 610, 1245, 952]
},
{
label: '2014 customers #',
fillColor: '#7BC225',
data: [3104, 1689, 1318, 589, 1199, 1436]
}
]
};
最佳答案
诀窍是设置 style
宽度/高度结合 attribute
宽度/高度,如 style
控制显示和 attribute
控制图像。
#Canvass_One, #Canvass_Two
{
width: 100%;
height: 100%;
}
注意:Chart.js 似乎有自己的设置来处理这样的响应,Chart.defaults.global.responsive = true;
, 因此可能需要将两者结合起来。
这里有一个示例来展示它是如何工作的。
Chart.defaults.global.responsive = true;
var barData = {
labels: ['CityA', 'CityB', 'CityC', 'CityD', 'CityF', 'CityG'],
datasets: [
{
label: '2010 customers #',
fillColor: '#382765',
data: [2500, 1902, 1041, 610, 1245, 952]
},
{
label: '2014 customers #',
fillColor: '#7BC225',
data: [3104, 1689, 1318, 589, 1199, 1436]
}
]
};
var ctx2 = $("#Canvass_One").get(0).getContext('2d');
ctx2.canvas.height = 300; // setting height of canvas
ctx2.canvas.width = 560; // setting width of canvas
//ctx2.fillStyle = "#FF0000";
//ctx2.fillRect(10,0,450,75);
var clientsChart = new Chart(ctx2).Bar(barData);
var ctx1 = $("#Canvass_Two").get(0).getContext('2d');
ctx1.canvas.height = 300; // setting height of canvas
ctx1.canvas.width = 560; // setting width of canvas
ctx1.fillStyle = "#0000FF";
ctx1.fillRect(10,0,450,75);
#mainContainer
{
width:100%;
height: 100%;
}
#leftcolumn
{
float:left;
display:inline-block;
width: 50%;
height: 100%;
background: blue;
}
#rightcolumn
{
float:left;
display:inline-block;
width: 50%;
height: 100%;
background-color : red;
}
#Canvass_One, #Canvass_Two
{
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<div id="mainContainer">
<div id="leftcolumn">
<h2>Canvass Graph1</h2>
<canvas id="Canvass_One"></canvas>
</div>
<div id="rightcolumn">
<h2>Canvass Graph2</h2>
<canvas id="Canvass_Two"></canvas>
</div>
</div>
关于HTML5 Canvas 没有响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34173351/