Amcharts Inherit Font or set all Element Font

问题

I've set my page css to:

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

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

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

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

回答1:

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

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

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

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

Here's a demo of this in action.

来源：https://stackoverflow.com/questions/45923814/amcharts-inherit-font-or-set-all-element-font

标签

jquery

css

fonts

amcharts