javascript 如何使谷歌图表中横轴上的数据标题的字体数据加粗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16740833/
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
How can I make the font data BOLD for data titles on the horizontal axis in google charts?
提问by user1787184
The help that I received from other users on this forum didn't help at all ... I have a chart that is generated through google charts API on this link http://imageshack.us/f/9/capturesfn.png/
我从这个论坛上的其他用户那里得到的帮助根本没有帮助......我有一个通过谷歌图表 API 在这个链接上生成的图表http://imageshack.us/f/9/capturesfn.png/
However, the titles of the data on this column chart are so small and hard to read .. How can I make it so those labels on the horizontal axis can be bold and the fonts can be changed ??? The answers I got didn't help
但是，此柱形图上的数据标题太小且难以阅读.. 我怎样才能使横轴上的标签可以加粗并且字体可以更改？？？我得到的答案没有帮助
Below I did this but it doesnt seem to work .. where I am going wrong ? the data labels on the horizontal axis stay the same
下面我做了这个，但它似乎不起作用..我哪里出错了？水平轴上的数据标签保持不变
var options = {width: 1200, height: 800, hAxis: {textStyle: {color: 'black', fontName: 'Arial Black',fontSize: 35},is3D: true,title: 'Orders'};
chart.draw(dataTable, options);
回答by Floris
Original answer:
原答案：
var options = {
hAxis: {textStyle: {
color: 'black',
fontName: 'Arial Black',
fontSize: 16
};
chart.draw(data, options)
Might be of some help...
可能有点帮助...
EDITFull example (can be found at http://www.floris.us/SO/boldChart.htmlas well):
编辑完整示例（也可以在http://www.floris.us/SO/boldChart.html上找到）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Bold font demo</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Chango">
<script>
google.load("visualization", "1", {packages:["corechart"]});
function plotChart(){
// create some dummy data
var myData = [["x","y"],[1,1],[2,2],[3,3],[4,4],[5,2]];
// turn it into a table:
var myChartData = google.visualization.arrayToDataTable(myData);
// create the empty charts:
var normalPlot = new google.visualization.ScatterChart(document.getElementById('normalChart'));
var boldPlot = new google.visualization.ScatterChart(document.getElementById('boldChart'));
// create options for chart with bold labels:
var chartOptionsBold = {
title: 'Chart with bold x labels',
titleTextStyle: {color: 'blue', fontName: 'Arial', fontSize: '18', fontWidth: 'normal'},
hAxis: {title: 'x',
textStyle: {
fontName: 'Chango',
}
},
vAxis: {title: 'y values'},
lineWidth: 1,
pointSize: 2
};
var chartOptionsNormal = {
title: 'Chart with default axis labels',
titleTextStyle: {color: 'black', fontName: 'Arial', fontSize: '18', fontWidth: 'normal'},
hAxis: {title: 'x'},
vAxis: {title: 'y'},
lineWidth: 1,
pointSize: 2
};
normalPlot.draw(myChartData, chartOptionsNormal);
boldPlot.draw(myChartData, chartOptionsBold);
};
</script>
<style>
div.graphBox {
height: 400px; width: 600px;
}
</style>
</head>
<body onload="plotChart()">
<div class="graphBox", id="normalChart">Normal chart goes here</div>
<div class="graphBox", id="boldChart">Bold chart goes here</div>
</body>
</html>
Screen shot of output:
输出的屏幕截图：
As you can see, it is possible to change the properties of the axis labels with the example given. I did this with a Safari browser version 6.0.3; also tested with Firefox 21.0 (both on Mac). Also tested on iPhone - similar results.
如您所见，可以使用给定的示例更改轴标签的属性。我是用 6.0.3 版的 Safari 浏览器完成的；还使用 Firefox 21.0（均在 Mac 上）进行了测试。也在 iPhone 上进行了测试 - 类似的结果。
Further Edit
进一步编辑
You can make sure that the font you choose is available to the browser using something like this in the header:
您可以使用标题中的类似内容来确保浏览器可以使用您选择的字体：
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Chango">
This particular example makes the font "Chango" available. It is a very heavy font, and thus would "bold" your text quite nicely. Obviously, you need to adjust your hAxis textStyleto match whatever font you chose. You can find a selection of fonts at http://www.google.com/fonts/
此特定示例使字体“Chango”可用。这是一种非常重的字体，因此可以很好地“加粗”您的文本。显然，您需要调整您的hAxis textStyle字体以匹配您选择的任何字体。您可以在http://www.google.com/fonts/ 上找到一系列字体
回答by Ondrej
There is an optionto make the hAxistext bold:
有一个选项可以使hAxis文本加粗：
options.hAxis.textStyle.bold = true;
OR
或者
Full options set based on your example:
根据您的示例设置的完整选项：
var options = {
width: 1200,
height: 800,
hAxis: {
textStyle: {
color: 'black',
fontName: 'Arial Black',
fontSize: 35,
bold:true
},
is3D: true,
title: 'Orders'
};
}
chart.draw(dataTable, options);
