2

我从这个论坛上的其他用户那里得到的帮助根本没有帮助......我有一个通过这个链接上的谷歌图表 API 生成的图表http://imageshack.us/f/9/capturesfn.png/

但是，这个柱形图上的数据标题太小了，很难阅读..如何才能使横轴上的标签可以加粗并且可以更改字体？？？我得到的答案没有帮助

下面我做了这个，但它似乎不起作用..我哪里出错了？水平轴上的数据标签保持不变

 var options = {width: 1200, height: 800, hAxis: {textStyle: {color: 'black', fontName: 'Arial Black',fontSize: 35},is3D: true,title: 'Orders'};
chart.draw(dataTable, options);
4

2 回答 2

4

原答案：

var options = {
  hAxis: {textStyle: {
    color: 'black', 
    fontName: 'Arial Black', 
    fontSize: 16
  };

chart.draw(data, options)

可能有点帮助...

编辑 完整示例（也可以在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>

输出截图：

在此处输入图像描述

如您所见，可以使用给出的示例更改轴标签的属性。我用 Safari 浏览器 6.0.3 版做到了这一点；还使用 Firefox 21.0（均在 Mac 上）进行了测试。也在 iPhone 上进行了测试——结果相似。

进一步编辑

您可以使用标题中的类似内容确保您选择的字体可供浏览器使用：

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Chango">

这个特定示例使字体“Chango”可用。这是一种非常重的字体，因此可以很好地“加粗”您的文本。显然，您需要调整您hAxis textStyle的字体以匹配您选择的任何字体。您可以在http://www.google.com/fonts/找到一系列字体

于 2013-05-24T18:04:21.827 回答
2

有一个选项可以使hAxis文本变为粗体：

options.hAxis.textStyle.bold = true;

或者

根据您的示例设置的完整选项：

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);
于 2016-05-30T11:07:50.330 回答