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

【问题标题】：what is wrong with my code ? java script chart position我的代码有什么问题？ javascript图表位置
【发布时间】：2017-06-24 17:31:29
【问题描述】：

我正在尝试将我的两个 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>

【问题讨论】：

标签： javascript css html5-canvas chart.js

【解决方案1】：

您使用 css id(#) 选择器，但您的 div 上有 class(.)es。将classes 更改为 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>

【讨论】：