Sélection de famille de polices avec des graphiques Google?

Question

Est-il possible de définir la famille de polices pour l'une des graphiques Google non-flash visualisations? Plus précisément pour des choses comme le texte sur l'axe du graphique. graphiques Google est puissant, mais laid. Et malheureusement, je ne peux pas passer à quelque chose de plus agréable, comme gRaphael.

Answer 1

Regardez les propriétés TextStyle , Prenons par exemple le hAxis.textStyle:

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

Answer 2

Vous pouvez changer comme la famille de la police ceci: fontName: 'Arial'

Answer 3

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

1. En utilisant la notation d'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 Segoe UI ne fonctionne pas, parce que Google n'a pas dans leur dépôt. C'est malheureux, parce que je suis en utilisant l'API graphiques dans une application Fabric Office de l'interface utilisateur.
2. Un autre utilisateur a suggéré d'effectuer un style via CSS. Cela fonctionne ... mais seulement à l'écran. La seule façon d'imprimer ces graphiques que j'ai trouvé est de les rendre comme PNGs en utilisant cette méthode . Mais, bien sûr, qui ne saisit ce qui est configuré dans l'élément DOM; il ne considère pas CSS, afin que l'impression a tendance à être imprévisibles.

était à ma solution 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 y a probablement un moyen plus propre à faire tout cela (je suis un codeur aki, au mieux), et j'ai encore quelques questions à régler, comme les polices revenir lorsque vous passez la souris et les info-bulles ne se portant le titre droit , mais c'est la meilleure façon d'assurer la cohérence entre ce qui est affiché à l'écran et ce, inévitablement, vos utilisateurs vont vouloir imprimer.