Javascript 使用谷歌图表选择字体系列？

是否可以为任何非flash Google图表可视化设置字体系列？特别是图表轴上的文字。谷歌图表很强大，但很丑陋。不幸的是，我不能换到更好的东西，比如gRaphael。

看看属性，比如

hAxis.textStyle

：

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

---

您可以这样更改字体系列-

fontName:“Arial”

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

---

所以，这两个答案在技术上都是准确的，但我想添加一点背景（我无法添加评论，因为我没有合适的声誉）

虽然使用对象表示法为所有内容传递文本样式非常好，而且绝对是从Google的POV中设置图表元素样式的首选方法，但您最终会受到Google在字体库中设置的字体选择的限制。所以，其中一个例子显示SegoeUI不起作用，因为Google的存储库中没有这个。这很不幸，因为我正在Office Fabric UI应用程序中使用charts API

另一位用户建议通过CSS执行样式设置。这很有效。。。但只是在屏幕上。打印我发现的这些图形的唯一方法是使用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);
});

---

也许有一种更干净的方法可以做到这一切（充其量我是一个黑客程序员），我仍然有一些问题需要解决，比如鼠标悬停时字体会恢复，工具提示的样式不正确，但这是确保屏幕上显示的内容与不可避免的内容保持一致的最佳方法，您的用户将想要打印。

您现在至少可以这样做：titleTextStyle:{color:'5c5c'，fontName:'Segoe UI Light'，fontSize:'16'}，要更改

字体权重

，将其添加到css中应该会有帮助。记住文本

#chartContainer

应该是您的div的ID，您在其中调用了chart。您在哪里设置它？对我来说很有用。只要把它放在你的选项对象中：

chart.draw（数据，{fontName:'Roboto'}）