Selección de la familia de fuentes con Google Charts?

Question

¿Es posible configurar la familia de fuentes para cualquiera de las visualizaciones de gráficos de Google que no son flash? Específicamente para cosas como el texto en el eje del gráfico. Google charts es poderoso, pero feo. Y desafortunadamente no puedo moverme a algo más agradable, como gRaphael.

Answer 1

Tenga una mirada a los textstyle propiedades, Tomemos por ejemplo el hAxis.textStyle:

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

Answer 2

Puede cambiar la familia de fuentes como esto: fontName: 'Arial'

Answer 3

Por lo tanto, estos son técnicamente precisa respuestas, pero quería agregar un poco de contexto (que no pude agregar en los comentarios porque no tengo la reputación adecuada).

1. Durante el uso de la notación de objetos para pasar en los estilos de texto de todo es grande y sin duda el método preferido para estilizar los elementos del gráfico de Punto de vista de Google, usted es en última instancia limitado por las opciones de fuente que Google pone en su repositorio de fuentes. Entonces, uno de esos ejemplos que muestra la IU de Segoe no funciona, porque Google no tiene eso en su repositorio. Eso es desafortunado, porque estoy usando la API de gráficos dentro de una aplicación de interfaz de usuario de Office Fabric.
2. Otro usuario sugirió realizar un estilo mediante CSS. Esto funciona ... pero solo en la pantalla. La única forma de imprimir estos gráficos que he encontrado es renderizarlos como PNG usando this method. Pero, por supuesto, eso solo capta lo que está configurado en el elemento DOM; no considera CSS, por lo que la impresión tiende a ser impredecible.

Mi solución fue cambiar directamente los elementos dentro del contenedor SVG usando jQuery cargado después de la gráfica pasa al estado "listo", pero antes de que se representan como archivos 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); 
}); 

es probable que haya una forma más limpia de hacer todo eso (yo soy un codificador de hacky, en el mejor de los casos), y todavía tengo algunos problemas que resolver, como las fuentes que se revierten cuando cierras el mouse y los tooltips no se ajustan correctamente, pero eso es lo mejor forma de garantizar la coherencia entre lo que se muestra en pantalla y lo que, inevitablemente, sus usuarios van a querer imprimir.