我的代码出了什么问题？ java脚本图表位置

Question

我试图将我的两个Chart.js设置为水平位置。但不幸的是我的两个图表div没有回应风格。有没有人知道我的代码有什么问题。

   <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 es更改为ID。

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