Как изменить размер шрифта для аннотаций в графиках? - PullRequest
Новая
       87

Как изменить размер шрифта для аннотаций в графиках?

1 голос
/ 02 апреля 2020

Взгляните на этот пример из Dygraph setAnnotations с повторяющимися значениями x :

http://jsfiddle.net/wn43LLv7/1/

Обратите внимание, что там они попытался использовать класс CSS: 

.dygraph-annotation
{
    font-size: 14;
...

..., который пытается изменить размер шрифта. Однако изменение размера шрифта и запуск сниппета не имеет никакого значения.

Кроме того, в http://dygraphs.com/annotations.html говорится:

cssClass CSS класс, используемый для стилизации аннотации

... поэтому я сделал еще один jsfiddle для проверки, может ли он изменить размер шрифта:

http://jsfiddle.net/u7shmody/1/

... и нет, не может.

Что, вероятно, не является большим сюрпризом, потому что, если я посмотрю на аннотацию в Firefox Проверка объекта, у меня будет: 

<div style="font-size: 14px; left: 217.5px; top: 79.1111px; width: 16px; height: 16px; color: rgb(64, 0, 128); border-color: rgb(64, 0, 128);" class="dygraph-annotation dygraphDefaultAnnotation dygraph-default-annotation myAnnot" title="undefined">A</div>

... итак, размер шрифта указан inline в атрибуте style элемента div, который, насколько я знаю, имеет наивысший приоритет в CSS, и никакой класс не мог бы переопределить его (либо если мы переопределим библиотечные, такие как .dygraph-annotation, или попробуем добавить наш собственный класс через cssClass).

Итак, как можно изменить размер шрифта аннотации в графах? Может быть, есть какой-то обратный вызов, который можно переопределить, чтобы font-size можно было вставить в атрибут встроенного стиля элемента?

1 Ответ

1 голос
/ 02 апреля 2020

dygraphs 1 использует только встроенные стили. Графы 2 перешли к сохранению своих стилей в файле CSS (dygraph.css), что значительно упрощает их переопределение. Но этот пропустили по причинам, которые потеряны во времени. Если когда-нибудь появится dygraphs 3, он, вероятно, исправит это.

Тем временем вам придется использовать !important, чтобы переопределить размер шрифта с помощью CSS.

. Вы можете также переопределите это в JavaScript, если вы предпочитаете. Размер всплывающих подсказок определяется свойством axisLabelFontSize. Чтобы изменить его, вы можете настроить это свойство: 

new Dygraph(div, data, { axisLabelFontSize: 28 });

Конечно, это сделает метки на ваших осях действительно крупным шрифтом! Чтобы сделать их более нормальными, вы можете откорректировать их обратно: 

new Dygraph(div, data, {
  axisLabelFontSize: 28,
  axes: {
    x: { axisLabelFontSize: 14 },
    y: { axisLabelFontSize: 14 },
  }
});

Определенно взломать, но это может сработать!

...