jquery - 图表 : How to place the legend on the right of the chart

Question

所以我有了这张用 flotcharts 库生成的图表:

HTML 是:

<div class="demo-container">
    <div id="legend-container"></div>
    <div id="placeholder" class="demo-placeholder"></div>
</div>

现在，我想将图例放在图表之外。所以我开始在我的绘图选项中使用它:

var options = {
    ...,
    legend:{         
        container:$("#legend-container"),
    }
    ...
}

还有 CSS:

#legend-container {
    background-color: #fff;
    padding: 2px;
    margin-bottom: 8px;
    border-radius: 3px 3px 3px 3px;
    border: 1px solid #E6E6E6;
    display: inline-block;
    margin: 0 auto;
}

结果是:

太棒了!但现在我想将图例放在图表的顶部(或底部)，而不是图表的右侧，即图表旁边的空白区域。

怎么做？

为了完整起见，我的其余 CSS 是:

.demo-container {
    box-sizing: border-box;
    width: 750px;
    height: 300px;
    padding: 20px 15px 15px 15px;
    margin: 15px auto 30px auto;
    border: 1px solid #ddd;
    background: #fff;
    background: linear-gradient(#f6f6f6 0, #fff 50px);
    background: -o-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -ms-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -moz-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    -o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.demo-placeholder {
    width: 80%;
    height: 80%;
    font-size: 14px;
    line-height: 1.2em;
}

Answer 1

切换 div 的顺序，然后将它们向左浮动:

<div class="demo-container">        
    <div id="placeholder" class="demo-placeholder"></div>
    <div id="legend-container"></div>
</div>

CSS:

.demo-placeholder {
    width: 80%;
    height: 80%;
    font-size: 14px;
    line-height: 1.2em;
    float: left; /*<-- ADD THIS*/
}

示例 here .