HTML5画布不具有响应式设计

Question

HTML5画布不具有响应式设计

3

我有一个主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设置Canvas的高度和宽度

    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):

我的问题是当我缩小浏览器窗口时，画布会重叠。谢谢您的任何帮助。我的情况是在div中没有使用图像，它只是一个纯粹的带有chart 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]
    }
]
};

- Francis Saul

1

可能是这个问题的重复：如何使HTML5 Canvas及其包含的图片跨浏览器具有响应式。 - Scott Selby

@ScottSelby：我已经阅读过了，但这是不同的情况。 - Francis Saul

重复问题的第二个答案解决了你的问题。 - Asons

我还可以建议您删除所有calc(100% - 50%)版本，只需编写一次width: 50%;。 - Asons

@LGSon：好的，会尝试那个。 - Francis Saul

@LGSon：对我没用。 - Francis Saul

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Asons · Accepted Answer

诀窍在于将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>