Манипулирование легендами в диаграммах Google

Использование диаграммы области Google: http://code.google.com/apis/chart/interactive/docs/gallery/areachart.html

Кто-нибудь знает, как я могу свободно манипулировать легендами?

В значительной степени я хочу один из двух:

Уметь свободно устанавливать каждый элемент легенды.
Установите легенду, которая отображается в одной строке, чтобы иметь несколько строк, если размер легенды превышает ширину области легенды. (Предпочитаемый)

Я бы избегал взломов, чтобы манипулировать svg в iframe btw.

Ответ 1

Невозможно манипулировать легендами, как мы желаем. В вопросе о щедрости: Вы можете использовать

в двух диаграммах

legend : 'none'

а также использовать цвета, чтобы гарантировать, что все элементы имеют один и тот же цвет.

colors:['red','#004411']

Кроме того, мы более не можем манипулировать ими: (

Ответ 2

Для полного управления я предлагаю отключить их

legend : { position:"none"}

Создание вашей собственной полностью настроенной легенды за пределами диаграммы с помощью html.

Затем привязка вашей пользовательской легенды к диаграмме с помощью события select в сочетании с событиями щелчка или наведения/фокуса (независимо от того, что вы хотите) в своей пользовательской легенде.

см. https://code.google.com/apis/ajax/playground/?type=visualization#interaction_using_events для начала.

Ответ 3

Возможно, что-то вроде этого (это зависит от используемого шрифта, вам нужно получить долю вашего шрифта)

var my_legend = "this is my legend x";

var len_legend = my_legend.length;

var width_graph = 400;

var chars_per_line = width_graph / [REPLACE_BY_PROPORTION]

if (len_legend > chars_per_line) {

    my_legend = wordwrap(my_legend, 20, '<br/>\n');

}

И ФУНКЦИЯ WRAP WORD (или что-то в этом роде)

function wordwrap( str, width, brk, cut ) {

    brk = brk || '\n';

    width = width || 75;

    cut = cut || false;

    if (!str) { return str; }

    var regex = '.{1,' +width+ '}(\\s|$)' + (cut ? '|.{' +width+ '}|.+$' : '|\\S+?(\\s|$)');


return str.match( RegExp(regex, 'g') ).join( brk );

}

SO ДЛЯ вашего кода...

заменить значения на

var chart = new google.visualization.AreaChart(document....

и т.д.

вашими варами.

не использовать width = 400, использовать ширину и т.д.... и вашу строку.

Ответ 4

Я ищу более разумное решение, чем мое, поэтому я увидел этот вопрос.

Мое текущее решение - найти элемент html, который содержит легенду и манипулировать ими, как и с вашим собственным пользовательским элементом html. (Здесь вам придется иметь дело с SVG elems)

document.getElementById('pie-chart').getElementsByTagName('g')[0].setAttribute("style", "transform: translate(-130px)");

Ответ 5

Вы можете просто манипулировать следующим кодом для настройки ваших легенд:

var options = {
    title: '',
    pieHole: 0.4,
    colors: ['#0590FB', '#1DE6A2', '#FEB11C', '#FF4863', '#5A479C'],
    legend : { position:"right", alignment:"center"},
    chartArea: { 
        left: 10, 
        top: 10, 
        width: '130%', 
        height: '65%'
    },
    tooltip: {
        trigger:'none'
    }