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

Ответ 1

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

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

Ответ 2

Вы можете изменить семейство шрифтов следующим образом: fontName: 'Arial'

Ответ 3

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

• При использовании нотации объектов для передачи в текстовых стилях для всего, что является большим и, безусловно, предпочтительным методом стилизации элементов диаграммы из Google POV, вы в конечном счете ограничены выбором шрифтов, который Google помещает в свой репозиторий шрифтов. Таким образом, один из примеров, показывающих пользовательский интерфейс Segoe, не работает, потому что Google не имеет этого в своем репозитории. Это несчастливо, потому что я использую API диаграмм в приложении Office Fabric UI.
• Другой пользователь предложил выполнить стилирование с помощью CSS. Это работает... но только на экране. Единственный способ распечатать эти графики, которые я нашел, - это отобразить их как PNG, используя этот метод. Но, конечно, это только захватывает то, что настроено в элементе 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);
});

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