Selección de Fuentes Familia con gráficos de Google?

Question

¿Es posible establecer la fuente familiar para cualquiera de los que no son Flash visualizaciones de tabla de Google? Específicamente para cosas como el texto en el eje del gráfico. gráficos de Google es de gran alcance, pero feo. Y, por desgracia no puedo pasar a algo más agradable, al igual que gRaphael.

Answer 1

Tenga una mirada a los href="https://developers.google.com/chart/interactive/docs/gallery/barchart?hl=it" rel="noreferrer"> TEXTSTYLE propiedades 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, estas son las dos respuestas técnicamente correctas, pero quería añadir un poco de contexto (que no podía añadir 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 está limitada en última instancia por las opciones de fuente que Google pone en su repositorio de fuentes. Por lo tanto, uno de esos ejemplos que muestran Segoe interfaz de usuario no funciona, ya que Google no tiene que en su repositorio. Eso es lamentable, porque estoy usando la API de gráficos dentro de una aplicación de Office Tela interfaz de usuario.
2. Otro usuario sugirió la realización de un estilo a través de CSS. Esto funciona ... pero en la pantalla solamente. La única manera de imprimir estos gráficos que he encontrado es para hacerlos como PNG utilizando este método . Pero, por supuesto, que sólo toma lo que está configurado en el elemento DOM; no se considera CSS, por lo que la impresión tiende a ser impredecible.

Mi solución era cambiar directamente los elementos dentro del contenedor SVG usando jQuery cargado en después de la tabla entra en el estado de "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);
});

Probablemente hay una forma más limpia de hacer todo eso (yo soy un codificador hacky, en el mejor), y todavía tengo algunos problemas para trabajar fuera, como fuentes revertir cuando se pasa y la información sobre herramientas no conseguir justo labrado , pero esa es la mejor manera de garantizar la coherencia entre lo que se muestra en pantalla y lo que, inevitablemente, los usuarios van a querer imprimir.