Flotcharts:如何将图例放在图表的右侧

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*/
}

这里的例子.