浮點圖遷移圖例

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')
         }
      });

這是一個例子 。