使用 Google Charts 选择字体系列？答案

【问题标题】：Font Family Selection With Google Charts?使用 Google Charts 选择字体系列？
【发布时间】：2011-01-28 03:23:30
【问题描述】：

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

【问题讨论】：

标签： javascript charts google-api google-visualization

【解决方案1】：

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

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

【讨论】：

你现在至少可以这样：titleTextStyle: { color: '#5c5c5c', fontName: 'Segoe UI Light', fontSize: '16' },
要更改 font-weight，将其添加到您的 CSS 中应该会有所帮助 #chartContainer svg g { font-weight: 300; }。请记住文本 #chartContainer 应该是您的 div 的 ID，您在其中调用了图表。

【解决方案2】：

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

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

【讨论】：

你在哪里设置的？
为我工作。只需将其放在您的选项对象中：chart.draw(data,{fontName:'Roboto'});

【解决方案3】：

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

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

我的解决方案是在图表进入“就绪”状态后，但在它们呈现为 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);
});

可能有一种更简洁的方法来完成所有这些工作（我充其量是一个 hacky 编码器），但我仍然有一些问题需要解决，例如当您悬停时字体会恢复，并且工具提示的样式不正确，但这是确保屏幕上显示的内容与用户不可避免地想要打印的内容保持一致的最佳方式。

【讨论】：