Famille De Polices Sélection Avec Google Charts?

Est-il possible de définir la police de la famille pour tout de la non-flash Google chart visualisations? Spécifiquement pour des choses comme le texte sur le graphique de l'axe. Google charts est puissant, mais laid. Et malheureusement je ne peux pas passer à quelque chose de plus sympa, comme gRaphael.

OriginalL'auteur mazniak | 2010-03-16

  1. 17

    Ont un look à la textstyle propriétés, de prendre pour exemple le hAxis.textStyle:

    hAxis.textStyle: { color: '#FF0000', 
                   fontName: 'Arial', 
                   fontSize: '10' }
    Vous pouvez maintenant au moins comme ceci: titleTextStyle: { color: '#5c5c5c', nom: 'Segoe UI Light', fontSize: '16' },
    je VEUX que font-weight
    Pour changer font-weight, ajouter ceci dans votre css devrait être utile #chartContainer svg g { font-weight: 300; }. Rappelez-vous le texte #chartContainer doit être l'ID de votre div, où que vous appelez graphique.

    OriginalL'auteur systempuntoout

  2. 5

    Vous pouvez changer la police de caractères de la famille comme ceci: nom de la police: 'Arial'

    Où avez-vous mis?
    Fonctionne pour moi. Il suffit de le mettre dans votre objet options: chart.draw(data,{fontName:'Roboto'});

    OriginalL'auteur AdiP

  3. 3

    Donc, ce sont à la fois techniquement des réponses précises, mais je voulais ajouter un peu de contexte (que je n'arrivais pas à les ajouter dans les commentaires car je n'ai pas le approprié de la réputation).

    1. Lors de l'utilisation de l'objet de la notation de passer dans les styles de texte pour tout ce qui est grand et certainement la méthode préférée pour le style graphique des éléments de Google POV, vous êtes finalement limitée par le choix des polices de caractères que Google met à leur police référentiel. Donc, un de ces exemples montrant Segoe UI ne fonctionne pas, parce que Google n'a pas que dans leur dépôt. C'est malheureux, parce que je suis en utilisant les API graphiques au sein d'un Office de Tissu de l'INTERFACE utilisateur de l'application.
    2. Un autre utilisateur a proposé d'effectuer style via CSS. Cela fonctionne... mais à l'écran seulement. La seule façon d'imprimer ces graphiques que j'ai trouvé est de les rendre comme Png à l'aide de cette méthode. Mais, bien sûr, qui ne récupère que ce qui est configuré dans l'élément du DOM; il ne tient pas compte des CSS, de sorte que l'impression a tendance à être imprévisible.

    Ma solution a été de changer directement les éléments dans le conteneur SVG à l'aide de jQuery chargé après le graphique entre dans l'état "prêt", mais avant qu'ils ne soient rendus, que les 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);
});

    Qu'il y a probablement le moyen le plus propre pour faire tout cela (je suis un hacky codeur, au mieux), et j'ai encore quelques questions à travailler, comme les polices de revenir lorsque vous passez et les info-bulles ne pas obtenir style droit, mais c'est la meilleure façon de s'assurer de la cohérence entre ce qui est affiché à l'écran et ce qui, inévitablement, vos utilisateurs vont vouloir imprimer.

    OriginalL'auteur ChrisPEditor