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 provides the ability将图例重定位到您选择的容器（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')
         }
      });

这里是example。

重新定位flot plot的传说

1 个答案: