Google Tarte À La Légende Du Graphique D'Affichage

Je suis en train d'utiliser Google Diagramme circulaire de l'API et ont le diagramme et la légende apparaissent verticalement avec le diagramme au sommet et à la légende ci-dessous. Je veux seulement le tableau de largeur à 300px et ont réussi le passage de la légende au-dessous du graphique. Toutefois, étant donné que la largeur est de petite taille, la légende de la "coupe" et ajoute les flèches gauche/droite et #'s pour faire défiler les éléments de la Légende.

Je suis en train d'avoir la légende aussi d'afficher ses éléments verticalement dans une liste. pas gauche à droite, mais du haut vers le bas de sorte que chaque élément peut être vu. Je n'ai pas vu toutes les options de configuration pour ce correctif spécifique dans leur documentation.

Voici mon code:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Percentage'],
      ['Trust Funds - 52.6%',     52.6],
      ['Ed & Training - 13.6%',      13.6],
      ['Safety, Health & Env. - 10.5%',  10.5],
      ['Econ Dev & Infrastructure - 9.5%', 9.5],
      ['Admin - 7.2%',    7.2],
      ['Other - 2.2%', 2.2],
      ['Resettlement - 2%', 2],
      ['Matching Gifts/UW - 1.6%', 1.6],
      ['Arts/Culture - 0.8%', 0.8]
    ]);


    var options = {
      colors:['#d1ae2b','#b38849','#d8a35c','#636466','#a09f9f','#31536e','#4c7ea4','#73bfe5','#88d6f8'],
      pieSliceText:['none'],
      legend:{position: 'bottom'},
      chartArea:{left:6,top:6,width:"300px",height:"300px"}
    };

    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

   <div id="chart_div" style="width: 300px; height: 300px;"></div>
Il ressemble à l'orientation de la légende est déterminé par la position que vous choisissez, malheureusement. Puisque vous savez que les couleurs que vous fournissez, vous ne pourriez pas vous créer votre propre?
j'espérais être en mesure de maintenir la nature dynamique de la liste de légende. lorsque vous faites défiler les éléments du graphique "faits saillants", qui est quelque chose que nous voulons maintenir. mais je pourrais facilement supprimer la légende et simplement le code une légende. merci.
Vous pouvez même reproduire cette fonctionnalité avec des méthodes et des événements: google-developers.appspot.com/chart/interactive/docs/gallery/...
malheureusement, je ne suis pas trop versé dans JS, la plupart du temps juste un css/html mec, donc je ne sais comment faire. mais je vous remercie pour votre aide!

OriginalL'auteur Deep Rooted | 2012-06-27

  1. 0

    Violon Lienil suffit de retirer la configuration de la légende:{position: 'bas'}, 

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <div id="chart_div" style="width: 300px; height: 300px;"></div>

google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Percentage'],
      ['Trust Funds - 52.6%',     52.6],
      ['Ed & Training - 13.6%',      13.6],
      ['Safety, Health & Env. - 10.5%',  10.5],
      ['Econ Dev & Infrastructure - 9.5%', 9.5],
      ['Admin - 7.2%',    7.2],
      ['Other - 2.2%', 2.2],
      ['Resettlement - 2%', 2],
      ['Matching Gifts/UW - 1.6%', 1.6],
      ['Arts/Culture - 0.8%', 0.8]
    ]);


    var options = {
    width:'50px',
      colors:['#d1ae2b','#b38849','#d8a35c','#636466','#a09f9f','#31536e','#4c7ea4','#73bfe5','#88d6f8'],
      pieSliceText:['none'],
      chartArea:{left:1,top:6,width:"100%",height:"100px"}
    };

    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }

    OriginalL'auteur Innovative Thinker