Google представляет манипуляции с легендой - PullRequest
Новая
       4

Google представляет манипуляции с легендой

15 голосов
/ 18 октября 2011

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

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

Очень хочу одного из двух:

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

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

Ответы [ 5 ]

16 голосов
/ 30 ноября 2012

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

legend : { position:"none"}

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

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

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

6 голосов
/ 07 декабря 2011

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

на двух графиках 

legend : 'none'

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

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

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

)
0 голосов
/ 29 июня 2019

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

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'
    }
0 голосов
/ 09 февраля 2017

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

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

document.getElementById('pie-chart').getElementsByTagName('g')[0].setAttribute("style", "transform: translate(-130px)");
0 голосов
/ 03 декабря 2011

Может быть, что-то вроде этого (это зависит от шрифта, который вы используете, вам нужно получить пропорцию вашего шрифта) 

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

}

И ФУНКЦИЯ WAP 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 );

}

ТАК ДЛЯ ВАШЕГО кода ...

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

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

и т.д.

вашими переменами.

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

...