Google Chart APIを使用した垂直ラベル?

StackOverflow https://stackoverflow.com/questions/786789

質問

Google Charts APIを使用してX軸ラベルを垂直にする方法を知っている人はいますか?

小さなグラフに多くのラベルを収める必要があります。

ありがとう

役に立ちましたか？

解決

完璧ではないが、 APIは、私たちが何をしたか垂直方向のx軸のラベルを取得するために、とにかく提供していないデータポイントポイントのラベルと、正規x軸ラベルの組み合わせでしたP>

あなたはより多くの制御が必要な場合はダンダスチャートのようなものを試してみてください。

他のヒント

slantedtextangleとパラメータオプションを追加します。90度を縦にラベルを表示する

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

これは、古いスレッドのビットです。しかし、私はこのために自分を検索し、この出くわした...

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

hAxis.slantedTextAngleとhAxis.slantedText：

を探します。 （斜面のための間にか何か）あなたの縦表示のための90の角度を設定します。

これが可能になりました。

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

あなたは「回避」することができます別の可能な方法は、この問題は、x軸を追加することです。

chxt=x,y

に変更される可能性があります：

chxt=x,y,x

（あなたがあなたの元x軸にしたものが同一の印加を持っていることを確認してください）その後、一つの軸であなたのラベルの他のすべての設定および他のすべてのは、どのくらいお使いのラベルに応じて、他のx軸（またはすべての第三中1によって相殺）。 

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

2に注意してください||間の空のラベルのために。あなたのグラフ上にその方法は、ラベルが車軸のスイッチをオフにし、あなたが少しより多くのスペースを持っています：

Alpha    Gamma    Epsilon    Eta
    Beta      Delta      Zeta

ここで対角テキスト。これはそれを行うための私の方法ですが、私はそれが彼らを助けることを願っています。

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);
    }

私は ない 軸を回転す​​る方法を見つけましたが、ラベルを短くして、ラベルが実際に何を表しているかを説明する凡例を作成しました。

クリック ここ Google グラフのサンプルについては、

はい！

その後、

trueに設定hAxis.slantedTextとは= 90 hAxis.slantedTextAngleを設定します。 そのような... 

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",

    });

トリック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'
    }
  };
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top