私のコードで何が問題になっていますか？ Javaスクリプトのチャートの位置

Question

2つのChart.jsを水平位置に設定しようとしています。残念ながら私の2つのチャート部門はスタイルに反応しません。私のコードで何が問題であるかを知っていますか？

<style> 
    #Bar { 
     position: absolute; 
     left: 0px; 
     right: 0px; 
     bottom: 0px; 
     top: 0px; 
    } 

    #Pie { 
     position: absolute; 
     left: 500px; 
     right: 0px; 
     bottom: 0px; 
     top: 0px; 
    } 
</style> 



<div class="Bar"> 

    <label for="myChart"> 
     Bar chart Title <br /> 
     <canvas id="myChart" width="300" height="250"></canvas> 
    </label> 
</div> 


<div class="Pie"> 
    <label for="myPieChart"> 
     Pie chart Title<br /> 
     <canvas id="myPieChart" width="250" height="250"></canvas> 
    </label> 
</div> 

Answer 1

あなたはCSS id(#)セレクタを使用していますが、あなたはあなたのdivの上class(.) ESを持っています。 classをidsに変更してください。

<div id="Bar"> 

    <label for="myChart"> 
     Bar chart Title <br /> 
     <canvas id="myChart" width="300" height="250"></canvas> 
    </label> 
</div> 


<div id="Pie"> 
    <label for="myPieChart"> 
     Pie chart Title<br /> 
     <canvas id="myPieChart" width="250" height="250"></canvas> 
    </label> 
</div> 

またはスタイルのセレクタをクラスに変更します（.を使用）。

.Bar { 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    top: 0px; 
} 

.Pie { 
    position: absolute; 
    left: 500px; 
    right: 0px; 
    bottom: 0px; 
    top: 0px; 
} 

例

#Bar { 
 
    position: absolute; 
 
    left: 0px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    top: 0px; 
 
} 
 

 
#Pie { 
 
    position: absolute; 
 
    left: 500px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    top: 0px; 
 
}

<div id="Bar"> 
 
    <label for="myChart"> 
 
     Bar chart Title <br /> 
 
     <canvas id="myChart" width="300" height="250"></canvas> 
 
    </label> 
 
</div> 
 

 

 
<div id="Pie"> 
 
    <label for="myPieChart"> 
 
     Pie chart Title<br /> 
 
     <canvas id="myPieChart" width="250" height="250"></canvas> 
 
    </label> 
 
</div>