浮点图迁移图例

Question

我正在将flot用作绘图javascript实用程序。 这是我正在使用的允许切换的示例... https://github.com/flot/flot/blob/master/examples/series-toggle/index.html

我想要实现的是将图例移至图的右侧，因为具有多个曲线会导致图例变大并阻塞视图。 我尝试了api建议的“ aboveData”选项：

$.plot("#placeholder", data, {
                    yaxis: {
                        min: 0
                    },
                    xaxis: {
                        tickDecimals: 0
                    },grid: {show:true, aboveData:false},
                });

它什么也没做。 然后，我尝试更改CSS以向表添加“ left”属性：

.legend table {
    border-spacing: 5px;
    left:800px;
}

它确实将图例表向右移动，但是后面有一个不透明的白色div容器。 知道如何删除它吗？

Answer 1

如果您使用父legend div而不是表格，则方法有点奏效：

.legend {
    position: absolute;
    left:800px;
}

不过，这可能不是实现目标的最佳方法。 flot 可以将图例重定位到您选择的容器（div）。 因此，为了使图例正确，我将执行以下操作：

<div id="flotGraph" style="width: 400px; height: 400px; float: left"></div>
<div id="legendContainer" style="float: left"></div>

然后使用图例容器属性：

    $.plot("#placeholder", data, {
        yaxis: {
            min: 0
        },
        xaxis: {
            tickDecimals: 0
        },
        legend: {
            container: $('#legendContainer')
         }
      });

这是一个例子 。