2

このフォーラムで他のユーザーから受けた支援はまったく役に立ちませんでした... このリンクhttp://imageshack.us/f/9/capturesfn.png/にある Google チャート API を介して生成されたチャートがあります。

しかし、この縦棒グラフのデータのタイトルは小さくて読みにくい..横軸のラベルを太字にしたり、フォントを変更したりできるようにするにはどうすればよいでしょうか??? 私が得た答えは役に立たなかった

以下でこれを行いましたが、うまくいかないようです..どこが間違っていますか? 横軸のデータ ラベルは同じままです

 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)

何かの参考になるかも…

EDIT 完全な例（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 に答える