Réponse originale :
var options = {
hAxis: {textStyle: {
color: 'black',
fontName: 'Arial Black',
fontSize: 16
};
chart.draw(data, options)
Cela pourrait être utile...
EDIT L'exemple complet (peut être trouvé à l'adresse suivante http://www.floris.us/SO/boldChart.html également) :
<!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>
Capture d'écran de la sortie :
![enter image description here]()
Comme vous pouvez le constater, il est possible de modifier les propriétés des étiquettes d'axe à l'aide de l'exemple donné. J'ai fait cela avec un navigateur Safari version 6.0.3 ; également testé avec Firefox 21.0 (tous deux sur Mac). Testé également sur iPhone - résultats similaires.
Autres modifications
Vous pouvez vous assurer que la police que vous choisissez est disponible pour le navigateur en utilisant quelque chose comme ceci dans l'en-tête :
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Chango">
Cet exemple particulier met à disposition la police "Chango". Il s'agit d'une police très lourde, qui mettrait joliment votre texte en gras. Évidemment, vous devez ajuster votre hAxis textStyle pour qu'il corresponde à la police que vous avez choisie. Vous trouverez une sélection de polices à l'adresse suivante http://www.google.com/fonts/
