javascript - 使用 Google Charts 选择字体系列？

Question

是否可以为任何非 Flash Google 图表可视化设置字体系列？专门针对图表轴上的文本之类的东西。谷歌图表功能强大，但丑陋。不幸的是，我不能转向更好的东西，比如 gRaphael。

Answer 1

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

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

Answer 2

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

chart.draw(data,{fontName:'Roboto'});

Answer 3

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

1. 虽然使用对象表示法为所有内容传递文本样式非常棒，并且绝对是为 Google 的 POV 中的图表元素设置样式的首选方法，但您最终会受到 Google 在其字体存储库中的字体选择的限制。因此，其中一个显示 Segoe UI 的示例不起作用，因为 Google 的存储库中没有它。这很不幸，因为我在 Office Fabric UI 应用程序中使用图表 API。
2. 另一位用户建议通过 CSS 执行样式。这有效......但仅限于屏幕上。我发现打印这些图表的唯一方法是使用此方法将它们呈现为 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 编码器），而且我还有一些问题需要解决，比如当你悬停时字体会恢复，并且工具提示的样式不正确，但就是这样确保屏幕上显示的内容与用户不可避免地想要打印的内容之间的一致性的最佳方式。