Amcharts 继承字体或设置所有元素字体 [英] Amcharts Inherit Font or set all Element Font

问题描述

我已将页面 css 设置为:

I've set my page css to:

html { 
    font-family: 'Not the Default AmCharts Font';
}

我没有在图表代码中指定字体，但图表没有继承页面的 css 定义字体.

I haven't specified a font in my chart code, but the charts are not inheriting the page's css defined font.

有没有办法一次性为所有 Amcharts 元素全局设置字体?类似的东西:

Is there a way to globally set the font for all Amcharts elements in one go? Something like:

AmCharts.defaultFontFamily = 'Not the Default AmCharts Font';

我也很高兴使用某种 jQuery 解决方案，例如:

I'd also be happy with some sort of jQuery solution like:

$('.amcharts').find('*').css('font-family', 'Not the Default AmCharts Font');

这些解决方案都不起作用.

Neither of these solutions are working.

我真的希望这至少能影响以下方面:图表标题, 轴标题, 轴标签, 图表标签, 气球文本, 图例标签, 图例值

I'd really like this to impact at least the following: Chart Title , Axes Titles , Axes Labels , Graph Labels , Balloon Text , Legend Labels , Legend Values

推荐答案

由于 AmCharts 使用内联样式和属性，您可能需要使用 !important 来覆盖字体

Since AmCharts uses inline styles and attributes, you'll likely need to use !important to override the fonts

.yourchartclass * {
  font-family: 'Impact' !important;
}

另一种方法是利用 AmCharts.addInitHandler 方法创建一个全局 init 侦听器，该侦听器可以根据需要在任意多种类型的图表上运行并设置 fontFamily 和初始化期间的其他属性.例如:

Another way to go about this is to leverage the AmCharts.addInitHandler method to create a global init listener that runs on as many types of charts as you want and sets the fontFamily and other properties during initialization. For example:

AmCharts.addInitHandler(function(chart) {
  chart.fontFamily = 'Oswald';
  chart.fontSize = 16;
});

您还可以指定一组图表类型来限制 initHandler 可以运行的内容.您还可以向图表对象添加自定义标志并使用它们来确定要设置的设置，例如:

You can also specify an array of chart types to limit what the initHandler can run on. You can also add custom flags to your chart object and use them to determine which settings you want to set, for example:

AmCharts.addInitHandler(function(chart) {
  if (chart.useLato) {
    chart.fontFamily = "Lato";
    chart.fontSize = 16;
  } else if (chart.useRoboto) {
    chart.fontFamily = "Roboto";
    chart.fontSize = 12;
  } else {
    chart.fontFamily = "Oswald";
    chart.fontSize = 12;
  }
});

这里有一个演示.

这篇关于Amcharts 继承字体或设置所有元素字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！