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

Question

看看这个例子，来自Dygraph setAnnotationswithrepeated x values:

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 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中具有最高优先级，没有任何类可以重写它(如果我们重写像.dygraph-annotation这样的库，或者如果我们尝试通过cssClass添加我们自己的自定义类(。

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

Answer 1

dygraph 1只使用了内联样式。dygraph 2倾向于将其样式存储在CSS文件(dygraph.css(中，这使得它们更容易被覆盖。但这一次错过的原因是时间的流逝。如果有一个dygraph 3，它可能会解决这个问题。

同时，您必须使用!important来用CSS覆盖字体大小。

如果您愿意，您也可以在JavaScript中覆盖它。工具提示的大小由axisLabelFontSize属性决定。因此，要更改它，您可以调整该属性：

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

当然，这将使轴上的标签成为一个非常大的字体！为了让它们更正常，你可以调整它们：

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

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