web-dev-qa-db-ja.com

JavaScriptでGoogle Chartの凡例の幅を設定する方法は？

Google JS APIを使用してこのGoogle折れ線グラフを生成しています。ご覧のとおり、ラベルは非常に狭いです。ラベルテキスト全体が表示されるようにするにはどうすればよいですか？

enter image description here

google-visualization
35
f.ardelian

google code playground line charts に基づいたサンプルを次に示します。 chartAreaの幅オプションを調整すると、ラベル用のスペースが増えます。

new google.visualization.LineChart(document.getElementById('visualization')).
    draw(data, {curveType: "function",
                width: 500, height: 400,
                vAxis: {maxValue: 10},
                chartArea: {width: '50%'}}
        );

オプションの場合、チャートの下にラベルを配置することもできます。これにより、スペースが大幅に広がります。

new google.visualization.LineChart(document.getElementById('visualization')).
    draw(data, {curveType: "function",
                width: 500, height: 400,
                vAxis: {maxValue: 10},
                legend: 'bottom'}
        );
41
oli

ChartAreaオプションを100％の幅に拡張すると、問題が解決しました。ドキュメントとは異なり、chartAreaには凡例が含まれています。 PieChartを使用しましたが、LineChartでも同じオプションを使用できます。

var options = {'title':title,'width':w,'height':h,'chartArea':{left:0,top:10,width:"100%"}};
var chart = new google.visualization.PieChart(document.getElementById(chartDiv));
chart.draw(data,options);

参照 。

19
Nettie

以前の答えはどれも私にとってうまくいきませんでした。 widthを100％未満に設定すると、プロット領域が中央に配置され、左側に多くの未使用スペースが残ります。 100％に設定することも解決策ではありません。

うまくいったのは-ライブ作業フィドルを参照-right値を凡例に合わせ、left最終的に、Y軸のタイトルとラベルの値。プロットエリアwidthは、次の2つの固定マージンの間で自動的に調整されます。

var options = {
   ...
   legend: { position: 'right' },
   chartArea: {
      right: 130,   // set this to adjust the legend width
      left: 60,     // set this eventually, to adjust the left margin
   },
   ...
};
6
Cristi S.

legend.textStyleにはオプションがあり、Googleチャート内の凡例のテキストスタイルをカスタマイズできます

var options = {
                legend: { textStyle: { fontSize: 78  //size of the legend 
                } }
              }
2
Aravindh Gopi

チャートを広くするか、ラベルを短くする必要があります。

1
98374598347934875