2014-11-13 4 views
1

Я использую флот в качестве утилиты javascript для построения графика. Вот пример, я использую, который позволяет переключать ... https://github.com/flot/flot/blob/master/examples/series-toggle/index.htmlПеремещение легенды о графике участка

То, что я хочу добиться того, чтобы переместить легенду на правой стороне участка, как имеющие несколько кривых вызывает легенда расти большой и блок вид. я попробовал вариант «aboveData» как апи предложил:

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

Он ничего не делал. Затем я попытался изменить CSS, чтобы добавить свойство «левый» в таблице:

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

который делает переместить таблицу условных обозначений направо, но есть непрозрачный белый DIV контейнер остался позади. Любая идея, как удалить его?

ответ

1

Вы метод вроде работает, если вы используете родителю legend DIV вместо таблицы:

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

Это, вероятно, не самый лучший способ для достижения своих целей, хотя. flotprovides 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.

+0

спасибо. Это именно то, что я хотел. – max

Смежные вопросы