web-dev-qa-db-ja.com

Googleグラフの凡例と軸の書式設定

私はGoogleChartsを初めて使用しますが、グラフを囲むテキストで良好な結果を得ることができません。

これは私のチャートがどのように見えるかです：

This is how looks my chart

ご覧のとおり、横軸と凡例の両方がカットされているため、最終的な結果はそれほど良くありません。これを解決する方法はありますか？ 公式ドキュメント とここからいくつかの投稿を読んでいますが、これを行う方法が見つかりません。

要約：凡例または軸のテキストを変更して、完全に表示するにはどうすればよいですか？

javascriptgraphdrawgoogle-visualization
10
ArcDare

しばらく実験した後、凡例または軸上の単語のどの部分を表示できるかを選択することは不可能だと思います。

ただし、サイズと位置で遊ぶことができるので、多かれ少なかれ、私たちが探していたものを手に入れることができます。これができることです：

legend: {position: 'top', textStyle: {fontSize: 14}}

また、画像を少し大きくして、x軸に問題なく収まるようにしました（テキストを小さくするオプションもありました）。

だからこれを行うと、これはあなたが得るものです： enter image description here

16
ArcDare

基本的には、グラフの面積と幅/高さの設定についてです。

width: [yourChoice]px,
chartArea: {width: '50%'}

ref https://stackoverflow.com/a/6870732/661584

また、@ ArcDareが言うように、フォントサイズなどの他の利用可能なスタイリングオプションを使用します

5
MemeDeveloper

最適化されたグラフ領域の場合、

chartArea: {'width': '90%', 'height': '60%'}, 
legend: { position: 'bottom' },
hAxis : { textStyle : { fontSize: 10} },
vAxis : { textStyle : { fontSize: 10} },

秘訣は、軸のtextStyle fontsizeを設定すると、グラフの面積が約60〜70％になるため、グラフの下部に凡例をより適切に配置できるようになることです。

グラフと表の両方を作成するカスタムGoogle Chartsプラグインを自由に使用してください。https://github.com/cosmoarunn/gapiExt

0
Cosmo Arun