Amcharts Mewarisi Font atau mengatur semua Font Elemen

Saya telah mengatur css halaman saya ke:

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

Saya belum menentukan font dalam kode bagan saya, tetapi bagan tersebut tidak mewarisi font yang ditentukan css halaman.

Apakah ada cara untuk mengatur font secara global untuk semua elemen Amcharts sekaligus? Sesuatu seperti:

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

Saya juga akan senang dengan beberapa solusi jQuery seperti:

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

Tak satu pun dari solusi ini yang berhasil.

Saya benar-benar ingin hal ini berdampak pada setidaknya hal berikut: Judul Bagan, Judul Sumbu, Label Sumbu, Label Grafik, Teks Balon, Label Legenda, Nilai Legenda


fonts jquery css amcharts
person Nathan Clement    schedule 28.08.2017    source sumber

Jawaban (1)


arrow_upward
4
arrow_downward

Karena AmCharts menggunakan gaya dan atribut sebaris, Anda mungkin perlu menggunakan !important untuk mengganti font

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

Cara lain untuk melakukan hal ini adalah dengan memanfaatkan metode AmCharts.addInitHandler untuk membuat global init pendengar yang menjalankan sebanyak mungkin jenis bagan yang Anda inginkan dan menyetel fontFamily dan properti lainnya selama inisialisasi. Misalnya:

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

Anda juga dapat menentukan array tipe bagan untuk membatasi apa yang dapat dijalankan oleh initHandler. Anda juga dapat menambahkan tanda khusus ke objek bagan dan menggunakannya untuk menentukan pengaturan mana yang ingin Anda atur, misalnya:

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

Berikut demo cara kerjanya.

person xorspark    schedule 28.08.2017
comment
Fantastis! Saya sudah mencoba !important css override, yang tidak berhasil, tetapi init handlernya sempurna. - person Nathan Clement; 29.08.2017
comment
Aneh, !important berhasil untuk saya saat saya bereksperimen dengan codepen. Anda juga dapat merujuk ke daftar nama kelas CSS yang dihasilkan oleh grafik (Anda harus menyetel addClassNames ke true) dan gunakan rute tersebut untuk menata elemen teks secara langsung jika Anda lebih suka melakukannya melalui CSS. - person xorspark; 29.08.2017