web-dev-qa-db-fra.com

Manipulation de la légende des graphiques Google

Utilisation du graphique de zone Google: http://code.google.com/apis/chart/interactive/docs/gallery/areachart.html

Est-ce que quelqu'un sait comment je peux librement manipuler les légendes?

Je veux à peu près l'un des deux:

  • Soyez en mesure de définir librement chaque élément de légende quelque part.
  • Définissez la légende qui est affichée sur une ligne pour avoir plusieurs lignes si la taille de la légende dépasse la largeur de la zone de légende. (Préféré)

J'éviterais les hacks pour manipuler le svg dans l'iframe btw.

javascriptjquerygoogle-visualization
15
fmsf

Il n'y a aucun moyen de manipuler les légendes comme nous le souhaitons. Dans la question de la prime: vous pouvez utiliser

dans deux des graphiques

legend : 'none'

et utilisez également des couleurs pour garantir que tous les éléments ont la même couleur.

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

A part cela, nous ne pouvons malheureusement pas les manipuler beaucoup plus :(

6
fmsf

Pour un contrôle complet , je suggère de les désactiver 

legend : { position:"none"}

Création de votre propre légende totalement personnalisée en dehors du graphique avec html.

Ensuite, liez votre légende personnalisée au graphique à l'aide de l'événement de sélection, combiné avec des événements de clic ou de survol/focus (ce que vous voulez) sur votre légende personnalisée.

voir https://code.google.com/apis/ajax/playground/?type=visualization#interaction_using_events pour commencer.

16
MemeDeveloper

Vous pouvez simplement manipuler le code suivant pour la personnalisation de vos légendes:

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
Hasib Hosen_Pikkachu

Peut-être quelque chose comme ça (cela dépend de la police que vous utilisez, vous devez récupérer la proportion de votre police)

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

}

ET LA FONCTION WRAP Word (ou quelque chose comme ça)

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 POUR votre code ...

remplacer les valeurs à

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

etc

par vos vars.

ne pas utiliser width = 400, utilisez la largeur, etc. ... et votre chaîne.

0
Leandro

Je recherche une solution plus intelligente que la mienne, j'ai donc vu cette question.

Ma solution actuelle consiste à trouver un élément html qui contient une légende et à manipuler avec eux comme vous le feriez avec votre propre élément html personnalisé. (Vous devrez cependant vous occuper des elems SVG ici)

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