Selezione famiglia di font con i grafici di Google?

Question

È possibile impostare la famiglia di caratteri per le visualizzazioni di grafici Google non flash? Specificamente per cose come il testo sull'asse del grafico. I grafici di Google sono potenti, ma brutti. E sfortunatamente non riesco a passare a qualcosa di più bello, come gRaphael.

Answer 1

Date un'occhiata alle textstyle proprietà, Prendiamo ad esempio il hAxis.textStyle:

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

Answer 2

È possibile cambiare il tipo di carattere in questo modo: fontName: 'Arial'

Answer 3

Quindi, questi sono entrambi tecnicamente accurata risposte, ma volevo aggiungere un po 'di contesto (che non potevo aggiungere nei commenti perché non ho la reputazione appropriata).

1. Mentre si utilizza la notazione oggetto di passare in stili di testo per tutto ciò che è grande e sicuramente il metodo preferito per lo styling elementi del grafico dal punto di vista di Google, il gioco è in ultima analisi, limitato dalle scelte di carattere che Google mette nel proprio repository font. Quindi, uno di quegli esempi che mostrano l'interfaccia utente di Segoe non funziona, perché Google non ha questo nel loro repository. Questo è un peccato, perché sto usando l'API dei grafici all'interno di un'applicazione UI di Office Fabric.
2. Un altro utente ha suggerito di eseguire lo styling tramite CSS. Funziona ... ma solo sullo schermo. L'unico modo per stampare questi grafici che ho trovato è di renderli come PNG usando this method. Ma, naturalmente, questo prende solo ciò che è configurato nell'elemento DOM; non considera i CSS, quindi la stampa tende ad essere imprevedibile.

La mia soluzione era quella di modificare direttamente gli elementi all'interno del contenitore SVG usando jQuery caricato in fondo alla tabella della entra nello stato di "pronto", ma prima che siano resi come PNG:

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

probabilmente c'è un modo più pulito per fare tutto questo (sono un hacker coder, nel migliore dei casi), e ho ancora alcuni problemi da risolvere, come i font che si invertono quando si passa il mouse e le descrizioni dei comandi non vengono modificate correttamente, ma è il migliore modo per garantire la coerenza tra ciò che viene visualizzato sullo schermo e ciò che, inevitabilmente, i tuoi utenti vorranno stampare.