легенды не остаются на месте при изменении размеров связанных графиков в графиках - PullRequest
Новая
       21

легенды не остаются на месте при изменении размеров связанных графиков в графиках

3 голосов
/ 01 мая 2019

После того, как я синхронизирую графики в графиках, легенды не остаются на месте, когда я масштабирую / удаляю масштаб изображения / сбрасываю.

Я инициализировал графики следующим образом: 

g = new Dygraph(
    document.getElementById("demodiv"),
    data.slice(50),
    options
);

g2 = new Dygraph(
    document.getElementById("demodiv2"),
    data,
    options
);

Легендыстиль изменяется с помощью jQuery: 

$("#container .dygraph-legend").css("left", "50px");
$("#container .dygraph-legend").css("width", "150px");

и, наконец, я синхронизируюсь так: 

Dygraph.synchronize([g, g2], {
  selection: true,
  zoom: true,
  range: false
});

Затем, играя с масштабированием, масштабированием и сбросом на обоих графиках,ходят легенды.

Я создал этот jsFiddle , чтобы показать проблему (код для графиков в строке 618).

Фрагмент для того же:

Как заставить их сохранять исходное положение даже при увеличении и т. Д.

1 Ответ

4 голосов
/ 08 мая 2019

Не

Вы должны не изменить стили элемента Dygraph с помощью jQuery. Поскольку Dygraph будет постоянно менять стили, ваши jQuery стили больше не будут действовать.

Опция

Dygraph предоставляет возможность указать другой элемент DOM, который будет легендой. Это означает, что вы можете поместить содержимое легенды в другой div или любой другой элемент DOM, который вы хотите.

Опция называется labelsDiv. Подробнее здесь

Решение

Так как теперь мы можем использовать еще один элемент DOM в качестве содержимого нашей легенды / метки давайте немного изменим структуру DOM: 

<div id="container">
  <div id="demodiv"></div>
  <div id="legend"></div>
</div>

<div id="container2">
    <div id="demodiv2"></div>
    <div id="legend2"></div>
</div>

Обратите внимание, что теперь у нас есть два разных контейнера для двух разных графиков Dygraph. Мы обернули их контейнером, чтобы применить стиль position: relative; к контейнерам и поставить position: absolute; на #legend и #legend2. Давайте посмотрим на CSS сейчас. 

#container, #container2 {
  position: relative;
}

#legend, #legend2 {
  position: absolute;
  top: 0; /* set accordingly */
  left: 0; /* set accordingly */
  display: inline-block;
  width: 150px; /* set accordingly */
  background-color: #fff; /* set accordingly */
}

Теперь ваш скрипт, мы собираемся предоставить опцию labelsDiv и указать наши целевые элементы div: 

var data = [ ... ] // your data here;

g = new Dygraph( document.getElementById("demodiv"), data.slice(50), {
    customBars: true,
    labels: ["date", "a", "b", "c"],
    labelsDiv: document.getElementById('legend'),
});

g2 = new Dygraph( document.getElementById("demodiv2"), data, {
    customBars: true,
    labels: ["date", "a", "b", "c"],   
    labelsDiv: document.getElementById('legend2'),
});

Dygraph.synchronize([g, g2], {
    selection: true,
    zoom: true,
    range: false
});

Отрывок

Я много пытался создать фрагмент, чтобы результат был виден здесь одним щелчком мыши, но с ошибкой. Итак, вот скриптовая ссылка

...