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