Amcharts继承字体或设置所有元素字体

我已经设置我的页面的CSS：Amcharts继承字体或设置所有元素字体

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

我没有指定我的图表代码的字体，但图不继承页面的CSS定义的字体。

有没有一种方法可以一次性全局设置所有Amcharts元素的字体？喜欢的东西：

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

我也很乐意用某种jQuery的解决方案，如：

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

这些解决方案都在工作。

我真的希望这影响至少包括以下：图表标题，轴标题，轴标签，图形标签，气球文本，图例标签，图例值

来源

2017-08-28 Nathan Clement

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

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

另一种方式去了解这为t o利用AmCharts.addInitHandler方法创建一个全局的init侦听器，它可以根据需要在任意类型的图表上运行，并在初始化期间设置fontFamily和其他属性。例如：

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

还可以指定图表类型的数组来限制哪些initHandler都可以运行。您还可以添加自定义标记到您的图表对象，并用它们来确定要设置哪些设置，例如：

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; 
    } 
});

下面是这个动作一demo。

来源

2017-08-28 21:26:59 xorspark

太棒了！我已经尝试过'！important'的css覆盖，但这并不起作用，但init处理程序非常完美。 –

奇怪的是，当我正在尝试使用codepen时，“重要”工作。您还可以参考由图表生成的[CSS类名称]（http://www.amcharts.com/tutorials/css-class-names/）列表（您需要将'addClassNames'设置为true）并且如果你喜欢通过CSS来直接设置文本元素的样式，那就去那条路径。 – xorspark

Amcharts继承字体或设置所有元素字体

回答

相关问题