javascript - 我的代码有什么问题？ javascript图表位置

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。将 classes 更改为 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>