Amcharts สืบทอดแบบอักษรหรือตั้งค่าแบบอักษรองค์ประกอบทั้งหมด

ฉันได้ตั้งค่า CSS ของหน้าเป็น:

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

โซลูชันเหล่านี้ไม่ทำงาน

ฉันอยากให้สิ่งนี้ส่งผลกระทบอย่างน้อยต่อไปนี้: Chart Title , Axes Titles , Axes Labels , Graph Labels , Balloon Text , Legend Labels , Legend Values


fonts jquery css amcharts
person Nathan Clement    schedule 28.08.2017    source แหล่งที่มา

คำตอบ (1)


arrow_upward
4
arrow_downward

เนื่องจาก AmCharts ใช้สไตล์และแอตทริบิวต์แบบอินไลน์ คุณจึงอาจต้องใช้ !important เพื่อแทนที่แบบอักษร

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

อีกวิธีในการดำเนินการนี้คือการใช้ประโยชน์จากเมธอด AmCharts.addInitHandler เพื่อสร้างเครือข่ายทั่วโลก init Listener ที่ทำงานบนแผนภูมิได้หลายประเภทตามที่คุณต้องการและตั้งค่า 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;
  }
});

นี่คือการสาธิต ของการดำเนินการนี้

person xorspark    schedule 28.08.2017
comment
มหัศจรรย์! ฉันได้ลองใช้การแทนที่ !important css แล้ว ซึ่งไม่ได้ผล แต่ตัวจัดการ init นั้นสมบูรณ์แบบ - person Nathan Clement; 29.08.2017
comment
น่าแปลกที่ !important ทำงานให้ฉันในขณะที่ฉันกำลังทดลอง codepen คุณยังสามารถอ้างถึงรายการชื่อคลาส CSS ที่สร้างโดยแผนภูมิ (คุณจะต้องตั้งค่า addClassNames เป็นจริง) และไปตามเส้นทางนั้นเพื่อจัดรูปแบบองค์ประกอบข้อความโดยตรง หากคุณต้องการทำผ่าน CSS - person xorspark; 29.08.2017