Sélection de la famille de police avec les graphiques Google?

Question

Est-il possible de définir la famille de polices pour les visualisations de graphiques Google non Flash? Spécifiquement pour des choses comme le texte sur l'axe de la carte. Les graphiques Google sont puissants, mais laids. Et malheureusement, je ne peux pas passer à quelque chose de plus agréable, comme gRaphael.

Answer 1

allez voir les textstyle propriétés, prendre par exemple la hAxis.textStyle:

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

Answer 2

Vous pouvez changer la famille de polices comme ceci: fontName: « Arial »

Answer 3

Donc, ce sont à la fois sur le plan technique précis réponses, mais je voulais ajouter un peu de contexte (que je ne pouvais pas ajouter dans les commentaires parce que je n'ai pas la bonne réputation).

1. Tout en utilisant la notation de l'objet pour passer dans les styles de texte pour tout est grand et certainement la méthode préférée pour le style des éléments graphiques de POV de Google, vous êtes finalement limité par les choix de polices que Google met dans leur référentiel de polices. Ainsi, l'un de ces exemples montrant l'interface utilisateur de Segoe ne fonctionne pas, car Google ne l'a pas dans son référentiel. C'est malheureux, parce que j'utilise l'API de cartes dans une application d'interface utilisateur de Microsoft Office.
2. Un autre utilisateur a suggéré d'effectuer un style via CSS. Cela fonctionne ... mais à l'écran seulement. La seule façon d'imprimer ces graphiques que j'ai trouvés est de les afficher en tant que fichiers PNG en utilisant this method. Mais, bien sûr, cela ne fait que saisir ce qui est configuré dans l'élément DOM; il ne considère pas le CSS, donc l'impression a tendance à être imprévisible.

Ma solution a été de changer directement les éléments dans le conteneur SVG en utilisant jQuery chargé après le tableau entre dans l'état « prêt », mais avant qu'ils ne soient rendus comme PNGs:

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

Il est probablement une façon plus simple de faire tout ça (je suis un codeur hacky, au mieux), et j'ai encore quelques problèmes à résoudre, comme les polices qui se renversent quand vous planez et les infobulles ne sont pas bien ajustées, mais c'est le meilleur façon d'assurer la cohérence entre ce qui est affiché à l'écran et ce que, inévitablement, vos utilisateurs vont vouloir imprimer.