如何在JavaScript中设置Google Charts图例宽度？

Question

我正在使用Google JS API生成此Google Line Chart.如您所见,标签非常窄.如何制作以便整个标签文字可见？

Answer 1

以下是一些基于谷歌代码游乐场折线图的示例.调整chartArea width选项可为标签提供更多空间:

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

Answer 2

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

参考.

Answer 3

以前的答案都不适合我.将宽度设置为小于100%会使绘图区域居中,并在左侧留下太多未使用的空间.将其设置为100%也不是解决方案.

什么运作良好 - 看到实时工作小提琴 - 正在设置正确的值以适应图例,然后最终调整左值,Y轴标题和标签.绘图区域宽度将在这两个固定边距之间自动调整:

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
   },
   ...
};