Schriftfamilienauswahl mit Google Charts?

Question

Ist es möglich, die Font-Familie für alle Google-Karten-Visualisierungen ohne Flash festzulegen? Speziell für Dinge wie den Text auf der Diagrammachse. Google Charts ist mächtig, aber hässlich. Und leider kann ich mich nicht zu etwas Schönerem bewegen, wie zum Beispiel gRaphael.

Answer 1

Werfen Sie einen Blick auf die textstyle Eigenschaften, die hAxis.textStyle zum Beispiel nehmen: kann

hAxis.textStyle: { color: '#FF0000', 
        fontName: 'Arial', 
        fontSize: '10' } 

Answer 2

Sie die Familie Schriftart wie folgt aus: Schriftname: ‚Arial‘

Answer 3

Also, das sind sowohl technisch präzise Antworten, aber ich wollte ein wenig Kontext hinzufügen (das ich in Kommentaren nicht hinzufügen konnte, weil ich nicht die entsprechende Reputation habe).

1. Während das Objekt Notation für alles in Textstile passieren ist groß und auf jeden Fall die bevorzugte Methode für Diagrammelemente aus dem Google-POV Styling, sind Sie letztlich von den Schriftarten stehen zur Auswahl begrenzt, dass Google in ihrer Schrift Repository stellt. Eines der Beispiele, die Segoe UI zeigen, funktioniert nicht, weil Google das nicht in ihrem Repository hat. Das ist bedauerlich, weil ich die Diagramm-API in einer Office Fabric-UI-Anwendung verwende.
2. Ein anderer Benutzer schlug vor, Styling über CSS durchzuführen. Das funktioniert ... aber nur auf dem Bildschirm. Die einzige Möglichkeit, diese Graphen zu drucken, die ich gefunden habe, besteht darin, sie als PNGs mit this method auszugeben. Aber natürlich greift nur, was im DOM-Element konfiguriert ist; CSS wird nicht berücksichtigt, daher ist das Drucken eher unberechenbar.

Meine Lösung war, um direkt die Elemente innerhalb des SVG Container zu ändern mit jQuery geladen ein, nachdem das Diagramm, das die „ready“ Zustand eintritt, aber bevor sie als PNG-Dateien wiedergegeben sind:

google.visualization.events.addListener(chart,'ready',function(){ 
    var titleText = $('[chart-container] > div > div > svg > g:first-of-type > text:nth-of-type(1)'); 
    var subtitleText = $('[chart-container] > div > div > svg > g:first-of-type > text:nth-of-type(2)'); 
    var tooltipText = $('[chart-container] > div > div > svg > g > g').find('text'); 
    var tooltipStyle = {'font-family':'"Segoe UI SemiLight WestEuropean","Segoe UI SemiLight","Segoe WP SemuiLight","Segoe UI","Segoe WP",Tahoma,Arial,sans-serif'}; 
    var otherText = $('g > text'); 
    var textStyle = {'font-family':"'Segoe UI SemiLight WestEuropean','Segoe UI SemiLight','Segoe WP SemiLight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif"}; 
    var titleStyle = {'font-size':'21px','font-family':'"Segoe UI SemiLight WestEuropean","Segoe UI SemiLight","Segoe WP SemuiLight","Segoe UI","Segoe WP",Tahoma,Arial,sans-serif',fill:'#333'}; 
    var titlePos = {x:20,y:30}; 
    var subtitleStyle = {'font-size':'17px','font-family':"'Segoe UI Light WestEuropean','Segoe UI Light','Segoe WP Light','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif",fill:'#666'}; 
    var subtitlePos = {y:50,x:20}; 
    tooltipText.css(tooltipStyle); 
    otherText.css(textStyle); 
    titleText.css(titleStyle).attr(titlePos); 
    subtitleText.css(subtitleStyle).attr(subtitlePos); 
}); 

Es ist wahrscheinlich Ein sauberer Weg, all das zu tun (ich bin bestenfalls ein Hacky Coder), und ich habe immer noch ein paar Probleme zu lösen, wie zum Beispiel Fonts, wenn man den Mauszeiger dreht und die Tooltips nicht richtig formatiert werden, aber das ist das Beste So stellen Sie sicher, dass das, was auf dem Bildschirm angezeigt wird, konsistent ist und Ihre Benutzer zwangsläufig drucken möchten.