Seleção da família de fontes com gráficos do Google?

Question

É possível definir a família Fonte para qualquer uma das visualizações não flash do Google Chart? Especificamente para coisas como o texto no eixo do gráfico. Os gráficos do Google são poderosos, mas feios. E, infelizmente, não posso me mudar para algo melhor, como o Graphael.

Answer 1

Dê uma olhada no TextStyle propriedades, tome, por exemplo, o hAxis.textStyle:

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

Answer 2

Você pode mudar a família de fontes assim: Fontname: 'Arial'

Answer 3

Portanto, essas duas são respostas tecnicamente precisas, mas eu queria adicionar um pouco de contexto (que não pude acrescentar comentários porque não tenho a reputação apropriada).

1. Ao usar a notação de objeto para passar os estilos de texto para tudo é ótimo e definitivamente o método preferido para modelar elementos do gráfico do POV do Google, você está finalmente limitado pelas opções de fonte que o Google coloca em seu repositório de fonte. Portanto, um desses exemplos mostrando a UI da Segoe não funciona, porque o Google não tem isso em seu repositório. Isso é lamentável, porque estou usando a API de gráficos em um aplicativo de interface do usuário do Office Fabric.
2. Outro usuário sugeriu executar o estilo via CSS. Isso funciona ... mas apenas na tela. A única maneira de imprimir esses gráficos que encontrei é renderizá -los como PNGs usando este método. Mas, é claro, isso apenas agarra o que está configurado no elemento DOM; Não considera o CSS, portanto, a impressão tende a ser imprevisível.

Minha solução foi alterar diretamente os elementos dentro do contêiner SVG usando o jQuery carregado depois que o gráfico entra no estado "pronto", mas antes de serem renderizados como 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);
});

Provavelmente há uma maneira mais limpa de fazer tudo isso (eu sou um codificador hacky, na melhor das hipóteses), e ainda tenho alguns problemas para resolver, como fontes revertindo quando você passa o mouse e as dicas de ferramentas não estão sendo estilizadas, mas isso é A melhor maneira de garantir a consistência entre o que é exibido na tela e o quê, inevitavelmente, seus usuários vão querer imprimir.