Question

是否可以为任何非Flash Google图表可视化设置font-family？特别适用于图表轴上的文字。谷歌图表功能强大，但很难看。不幸的是，我无法转向更好的事情，比如gRaphael。

Answer 1

查看textstyle属性，例如hAxis.textStyle：

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

Answer 2

您可以像这样更改字体系列：fontName：'Arial'

Answer 3

所以，这些都是技术上准确的答案，但我想添加一些上下文（我无法添加评论，因为我没有相应的声誉）。

虽然使用对象表示法传递文本样式的一切都很棒，并且绝对是从Google的POV设置图表元素样式的首选方法，但最终还是受到Google在字体存储库中输入的字体选择的限制。因此，显示Segoe UI的其中一个示例不起作用，因为Google在其存储库中没有。这很不幸，因为我在Office Fabric UI应用程序中使用了图表API。
另一位用户建议通过CSS执行样式设置。这有效......但仅限于屏幕上。我发现打印这些图表的唯一方法是使用this method将它们渲染为PNG。但是，当然，只能抓取DOM元素中配置的内容;它不考虑CSS，因此打印往往不可预测。

我的解决方案是在图表进入“就绪”状态后使用jQuery直接更改SVG容器中的元素，但在它们呈现为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);
});

可能有一种更干净的方式来做所有这些（我最好是一个hacky编码器），而且我还有一些问题需要解决，比如当你悬停并且工具提示没有正确设置样式时恢复的字体，但这是确保屏幕上显示的内容与用户不可避免地要打印的内容之间保持一致性的最佳方式。

使用Google图表选择字体系列？

3 个答案: