Как установить ширину легенды Google Charts в JavaScript?

Question

Я создаю эту линейную диаграмму Google с помощью Google JS API.Как видите, этикетки очень узкие.Как сделать так, чтобы весь текст метки был виден?

Answer 1

Вот несколько примеров, основанных на графиках игровых площадок кода Google .Настройка параметра ширины 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'}
        );

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

Ни один из предыдущих ответов не помог мне.Установка width менее 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
   },
   ...
};

Answer 4

В legend.textStyle есть опция: мы можем настроить стили текста легенды в гугл-картах

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

Answer 5

Вам нужно сделать диаграмму шире или ваши метки короче.