web-dev-qa-db-ja.com

Google Charts APIを使用した垂直ラベル？

誰もがグーグルチャートAPIでx軸ラベルを垂直にする方法を知っていますか？

小さなチャートにたくさんのラベルをはめ込む必要があります。

ありがとう

apichartsgraphgoogle-visualization
24
Tony

APIは、バーティクルのx軸ラベルを取得する方法を提供していません（私がそれを逃した場合を除き、私も必要です）データポイントポイントラベルと通常のx軸ラベルの組み合わせでした-完璧ではありませんが、機能します

より詳細な制御が必要な場合は、ダンダスチャートなどを試してみてください

0
braindice

ラベルを垂直に表示するためにslantedtextangle：90度のパラメーターオプションを追加

var options ={ hAxis: {title: "Years" , direction:-1, slantedText:true, slantedTextAngle:90 }}
90
Milind Morey

これは少し古いスレッドです。自分でこれを探していて、これに出くわしました...

https://developers.google.com/chart/interactive/docs/gallery/areachart#Configuration_Options

HAxis.slantedTextAngleおよびhAxis.slantedTextを探してください。垂直表示の場合は角度を90に設定します（斜めの場合はその間の任意の角度）。

17
clarson

今可能です

var options = {
  title: "Test",
   hAxis: {
        direction:-1,
        slantedText:true,
        slantedTextAngle:90 // here you can even use 180
    }
};
14
Mehul Gayate

ここに対角テキスト。これが私のやり方です。それが彼らの役に立つことを願っています。

https://jsfiddle.net/8tvm9qk5/

コード：

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="chart_div"></div>

そして

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawStacked);

function drawStacked() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Departamentos');
      data.addColumn('number', 'Entregados');
      data.addColumn('number', 'En Stock');

      data.addRows([
        ['abdasdasa', 925, 786],
        ['bbdasdas', 652, 156],
        ['cbdasdas', 300, 200],
        ['ddasdasb', 925, 786],
        ['edasdb', 652, 156],
        ['fasdasb', 300, 200],
        ['gdasdasdb', 925, 786],
        ['abdasdasa', 925, 786],
        ['bbdasdas', 652, 156],
        ['cbdasdas', 300, 200],
        ['ddasdasb', 925, 786],
        ['edasdb', 652, 156],
        ['fasdasb', 300, 200],
        ['gdasdasdb', 925, 786]


      ]);

      var options = {
        title: 'Motivation and Energy Level Throughout the Day',
        isStacked: true,
        height:600,
        chartArea: {
            height:300,
          top:100,
        },
        hAxis: {
          title: 'Departamentos',
          titleTextStyle: {
            color: '#FF0000',            
          },

          slantedText:true,
          slantedTextAngle:45,

        },
        vAxis: {
          title: 'Kits'
        }
      };

      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
11
Gonzalo Del Carpio

この問題を回避するには、x軸を追加する方法もあります。

chxt=x,y

次のように変更できます：

chxt=x,y,x

（元のx軸に行ったものと同じものが適用されていることを確認してください）次に、1つの軸に1つおきにラベルを設定し、他のx軸に1つおきにオフセットします（またはラベルの長さに応じて3つおきに）。

chx1=0:|Alpha||Gamma||Epsilon||Eta|2:||Beta||Delta||Zeta

2つに注意してください||間の空のラベル。こうすることで、グラフのラベルが軸をオフにして、もう少しスペースができます。

Alpha    Gamma    Epsilon    Eta
    Beta      Delta      Zeta
11
xbakesx

私はではなく軸を回転させる方法を見つけましたが、私がやったことはラベルを短くしてから凡例を作成してラベルは実際に表します。

Googleチャートのサンプルについては、 ここ をクリックしてください。

3
Zac

はい！

HAxis.slantedTextをtrueに設定してから、hAxis.slantedTextAngle = 90を設定します。そのようです...

var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
    ac.draw(data, {
      title : 'Equipment Performance Chart',
      isStacked:true,
      vAxis: {
        viewWindowMode: 'explicit',
        viewWindow: {
            max: 100
            },
        title: "Percentage"
        },
      hAxis: {
        title: "Area",
        slantedText:true,
        slantedTextAngle:90
        },
      seriesType: "bars",

    });
3
Jason

トリックは、chartArea.height = 300およびchartArea.top = 100、高さ：600です。

var options = {
    title: 'Motivation and Energy Level Throughout the Day',
    isStacked: true,
    height:600,
    chartArea: {
        height:300,
        top:100,
    },
    hAxis: {
      title: 'Departamentos',
      titleTextStyle: {
        color: '#FF0000',            
      },

      slantedText:true,
      slantedTextAngle:45,

    },
    vAxis: {
      title: 'Kits'
    }
  };
2
Gonzalo Del Carpio