HTML5 Canvas 没有响应

Question

我有一个主 div，里面有两个 div，每个 div 都有一个画布。我的问题是画布没有响应，当我调整浏览器大小时它会重叠。请看下图。

这是我的 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

画布：

再次，我的问题是当我最小化/调整浏览器窗口大小时，画布重叠。感谢您的任何帮助。我的情况是我没有在我的 div 中使用图像，它只是一个带有图表 js 框架的纯画布来创建图表。

样本数据：

    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]
    }
]
};

Answer 1

诀窍是将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>