Javascript 使用谷歌图表选择字体系列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2455020/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Font Family Selection With Google Charts?
提问by mazniak
Is it possible to set font-family for any of the non-flash Google chart visualizations? Specifically for things like the text on the chart axis. Google charts is powerful, but ugly. And unfortunately I can't move to something nicer, like gRaphael.
是否可以为任何非 Flash 谷歌图表可视化设置字体系列？专门针对图表轴上的文本之类的内容。谷歌图表功能强大，但丑陋。不幸的是，我不能转向更好的东西，比如 gRaphael。
回答by systempuntoout
回答by AdiP
You can change the font family like this - fontName: 'Arial'
您可以像这样更改字体系列 - fontName: 'Arial'
chart.draw(data,{fontName:'Roboto'});
回答by ChrisPEditor
So, these are both technically accurate answers, but I wanted to add a little bit of context (that I couldn't add in comments because I don't have the appropriate reputation).
所以，这些都是技术上准确的答案，但我想添加一些背景信息（我无法添加评论，因为我没有适当的声誉）。
- While using the object notation to pass in text styles for everything is great and definitely the preferred method for styling chart elements from Google's POV, you're ultimately limited by the font choices that Google puts in their font repository. So, one of those examples showing Segoe UI doesn't work, because Google doesn't have that in their repository. That's unfortunate, because I'm using the charts API within an Office Fabric UI application.
- Another user suggested performing styling via CSS. This works... but on-screen only. The only way to print these graphs that I've found is to render them out as PNGs using this method. But, of course, that only grabs what's configured in the DOM element; it doesn't consider CSS, so printing tends to be unpredictable.
- 虽然使用对象表示法为所有内容传递文本样式非常棒，而且绝对是从 Google 的 POV 设置图表元素样式的首选方法，但您最终会受到 Google 放入其字体库的字体选择的限制。因此，显示 Segoe UI 的示例之一不起作用，因为 Google 的存储库中没有它。这很不幸，因为我在 Office Fabric UI 应用程序中使用图表 API。
- 另一位用户建议通过 CSS 执行样式。这有效......但仅在屏幕上。我发现打印这些图形的唯一方法是使用这种方法将它们渲染为 PNG 。但是，当然，这只会获取 DOM 元素中配置的内容；它不考虑 CSS，所以打印往往是不可预测的。
My solution was to directly change the elements within the SVG container using jQuery loaded in after the chart enters the "ready" state, but before they're rendered as PNGs:
我的解决方案是在图表进入“就绪”状态后，但在它们呈现为 PNG 之前，使用加载的 jQuery 直接更改 SVG 容器中的元素：
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);
});
There's probably a cleaner way to do all of that (I'm a hacky coder, at best), and I've still got some issues to work out, like fonts reverting when you hover and the tooltips not getting styled right, but that's the best way to ensure consistency between what's displayed onscreen and what, inevitably, your users are going to want to print.
可能有一种更简洁的方法来完成所有这些（我充其量是一个黑客编码器），而且我仍然有一些问题需要解决，例如当您悬停时字体恢复以及工具提示的样式不正确，但这就是确保屏幕上显示的内容与用户不可避免地想要打印的内容之间的一致性的最佳方法。
