如何更改 dygraphs 中注释的字体大小？

Question

看看这个例子，来自 :

请注意，他们试图使用 CSS class:

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

... 尝试更改字体大小。但是，更改字体大小和运行代码段没有任何区别。

此外，在 http://dygraphs.com/annotations.html 中，它说：

cssClass CSS class to use for styling the annotation

...所以我制作了另一个 jsfiddle 来测试它是否可以更改字体大小：

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

...不，它不能。

这可能不是什么大惊喜，因为如果我查看 Firefox Inspect Object 中的注释，我有：

<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>

...因此，字体大小是在 div 元素的 style 属性中内联指定的，据我所知，它在 CSS 中具有最高优先级，并且 class 无法以其他方式覆盖它（如果我们覆盖像 .dygraph-annotation 这样的库，或者如果我们尝试通过 cssClass 添加我们自己的自定义 class）。

那么，如何改变 dygraphs 中注释的字体大小呢？也许有一些回调，可以覆盖，所以可以在元素内联样式属性中注入font-size？

Answer 1

dygraphs 1 仅使用内联样式。 dygraphs 2 转向将其样式存储在 CSS 文件 (dygraph.css) 中，这使得它们更容易覆盖。但是这个 got missed 的原因已经过时了。如果有 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 },
  }
});

绝对是黑客，但它可能只是工作！

如何更改 dygraphs 中注释的字体大小？

How to change font size for annotations in dygraphs?

javascript

css

dygraphs