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

Question

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

Answer 1

Взгляните на текстовый стиль свойства, возьмем, к примеру, hAxis.textStyle:

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

Answer 2

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

Answer 3

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

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

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