Выбор семейства шрифтов с помощью графиков Google?

Question

Можно ли установить семейство шрифтов для любых графических визуализаций Google без флэш-памяти? В частности, для таких вещей, как текст на оси диаграммы. Карты Google являются мощными, но уродливыми. И, к сожалению, я не могу двигаться к чему-то приятному, например, gRaphael.

Answer 1

Посмотрите к textstyle свойств, взять, например, hAxis.textStyle:

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

Answer 2

Вы можете изменить семейство шрифтов, как это: Fontname: «Arial»

Answer 3

Таким образом, они оба являются технически точными ответы, но я хотел добавить немного контекста (что я не мог добавить в комментарии, потому что у меня нет соответствующей репутации).

1. При использовании объекта обозначений для передачи в текстовых стилей для всего велик и, безусловно предпочтительный метод для укладки элементов диаграммы от POV Google, вы в конечном счете ограничен выбор шрифта, что Google ставит в их хранилище шрифтов. Таким образом, один из примеров, показывающих пользовательский интерфейс Segoe, не работает, потому что Google не имеет этого в своем репозитории. Это несчастливо, потому что я использую API диаграмм в приложении Office Fabric UI.
2. Другой пользователь предложил выполнить стилизацию с помощью CSS. Это работает ... но только на экране. Единственный способ распечатать эти графики, которые я нашел, - это отобразить их как PNG, используя this method. Но, конечно, это только захватывает то, что настроено в элементе DOM; он не рассматривает CSS, поэтому печать имеет тенденцию быть непредсказуемой.

Мое решение было непосредственно изменить элементы в SVG контейнера с помощью Jquery загружается в после того, как график входит в «готовое» состояние, но прежде, чем они отображаются как в формате 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); 
}); 

Там, наверное, более чистый способ сделать все это (в лучшем случае я хакерский кодер), и у меня все еще есть некоторые проблемы для разработки, такие как шрифты, возвращающиеся при наведении курсора, и всплывающие подсказки, не получающие стиль, но это лучший чтобы обеспечить согласованность между тем, что отображается на экране, и тем, что неизбежно, ваши пользователи захотят распечатать.