更改字体系列 Morris Donut Chart

Question

我正在使用非常可爱的莫里斯圆环图。问题是，我想更改该图表文本（在甜甜圈内）的字体系列，但无法做到。我还想为内部文本添加 3% 的填充...

我尝试添加

$("div svg text").attr("style", "font-family: 'Assistant' !important");

但对我不起作用。

有人对我有想法吗？感谢

Answer 1

我没有使用 morris.js 的经验，但由于您使用的是 jQuery，您可以简单地使用 .css() 方法，而不是更改样式属性。

$('div svg text').css({
    "font-family" : "'Assistant' !important",
    "padding" : "3%"
});

您必须将参数包装在一个对象中才能生效。

Answer 2

我和你有同样的问题。我发现 Morris Donut Chart 中的文本使用 <tspan> 作为最后一个元素，它没有指定任何字体系列。所以如果你只改变更高的元素而不是最后一个。 <tspan> 将覆盖您的样式。您需要做的只是基本的 css.

将此添加到您的 css 文件中。

tspan {
font-family: 'your desire font';
//you can add your extra style too :)
}

Answer 3

要更改默认字体系列，您可以设置 gridTex Family 属性，默认值为 sans-serif

change font-family Morris Donut Chart