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

Ответ 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'}
        );

Ответ 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);

Ссылка.

Ответ 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
   },
   ...
};

Ответ 4

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

Ответ 5

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

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