HTML5 Холст не реагирует

Question

У меня есть главный div, внутри которого есть два div, каждый из которых имеет полотно. Моя проблема заключается в том, что canvass не реагирует, он перекрывается при изменении размера браузера. см. ниже изображение.

Вот мой 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, чтобы установить высоту и ширину агитировать

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>