2
votes

Comment supprimer une info-bulle dans Google Chart

Je travaille sur des graphiques Google, dans lesquels je suis confronté à des problèmes.

Je suis en train de rendre un graphique en anneau contenant plus de 10 données, alors que se passe-t-il lorsque la largeur des données affichées dépasse elle apparaît dans l'outil- astuce comme

dont je ne veux pas

Ce que j'essaie de faire, comme le nombre d'en-têtes qu'il y a laissez-le être là pour ne pas le pousser dans l'info-bulle

[["Outlet","Amount"],["CHEF BAKERS BROOKFIELD",738999],["CHEF BAKERS ARAKERE",106050],["CHEF BAKERS AMEENPUR",89358],["CHEF BAKERS AYYAPPA NGR",80088],["Chef Bakers Bellandur",321705],["CHEF BAKERS BRIGADE METROPOLIS",65088],["CHEF BAKERS BAGMANE CBP",145432],["CHEF BAKERS CHANDAPURA",92830],["DIVYA SREE TECHNO PARK",82946],["Chef Bakers Doddanekkundi",92590],["CHEF BAKERS SIDDAPURA",115142],["CHEF BAKERS ECITY",163745],["CHEF BAKERS VYDEHI",84367],["CHEF BAKERS HARLUR ROAD",101337],["Chef Bakers Hennur Main Road",18045],["CHEF BAKERS HSR LAYOUT",358232],["CHEF BAKERS BOTANICAL GARDEN",22256],["CHEF BAKERS KADUBEESANAHALLI",277964],["CHEF BAKERS COFFEE BOARD",164906],["Chef Bakers Kaggadasapura",73045],["Chef Bakers Koramangala",79381],["CHEF BAKERS KASAVANAHALLI",424056],["Chef Bakers Marathahalli 1",115410],["Chef bakers Marathahalli 2",105703],["Chef Bakers Mahadevapura",209014],["CHEF BAKERS BEL LAYOUT",58661],["CHEF BAKERS MG ROAD",70005],["CHEF BAKERS MANYATA TECH PARK",105590],["CHEF BAKERS NAGAWARA",47832],["CHEF BAKERS PRESTIGE SHANTHINIKETAN",135772],["CHEF BAKERS PRITECH",301201],["RGA TECH PARK",64525],["CHEF BAKERS RAMANTHAPUR",62752],["CHEF BAKERS RR NAGAR",94200],["Chef Bakers Kadugodi",353045],["CHEF BAKERS SARJAPURA ROAD",84425],["CHEF BAKERS SINGASANDRA",60735],["CHEF BAKERS SPICE GARDEN",135243],["Chef Bakers Whitefield",427212],["CHEF BAKERS YELAHANKA",293061]]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donutchart" style="width: 100%; height: 550px;"></div>

Je ne veux pas supprimer les légendes, je veux juste les afficher en une fois plutôt que de les afficher dans l'info-bulle où l'utilisateur doit cliquer pour voir d'autres légendes

Données à vérifier

google.charts.load('current', {
  'packages': ['corechart'],
  'language': 'hi_IN'
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ["Outlet", "Amount"],
    ["S0001", 7153214],
    ["S0002", 1319026],
    ["S0003", 1497004],
    ["S0004", 1597004],
    ["S0005", 1697004],
    ["S0006", 1797004],
    ["S0007", 1897004],
    ["S0008", 13897004],
    ["S0009", 2097004],
    ["S0010", 1597004],
    ["S00011", 1698604]
  ]);

  var options = {
    pieHole: 0.6,
    legend: {
      position: 'right',
    },
    width: 'auto',

    height: 'auto'
  };

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

javascript jquery charts canvas google-visualization

0 commentaires

3 Réponses :

0
votes

Le problème est dû au fait que la légende du graphique prend plus d'espace que celui disponible dans l'élément contenant.

Si vous souhaitez supprimer la légende, ce que je ne recommande pas car le graphique devient très flou sans elle , vous pouvez définir position: 'aucun' dans les paramètres.

var options = {
  pieHole: 0.6,
  legend: {
    position: 'none',
  },
  width: 'auto',
  height: 'auto'
};

5 commentaires

oui, je savais déjà que ce que j'essaie de faire est d'aligner les légendes sur une ligne, peu importe leur nombre, car vous pouvez vérifier mon image, elle entre dans l'info-bulle, ce que je ne veux pas

Ce n'est pas possible avec le plugin Google Chart. Il détecte automatiquement lorsqu'il n'y a pas assez d'espace dans l'élément contenant et convertit la légende à paginer. Il n'y a pas de paramètres disponibles pour modifier cela. Si vous voulez ce comportement, vous devrez utiliser une autre bibliothèque de graphiques qui le permet, ou créer votre propre

créez votre: - ceci je n'ai aucune idée de comment puis-je faire cela, pouvez-vous me suggérer une autre bibliothèque

Pas de côté, je suggère d'utiliser Google. Cela étant dit, je ne pense pas que les bibliothèques le feront immédiatement. Je ne sais pas comment vous vous attendez à ce que quelque chose soit affiché dans un espace qui n'existe pas.

même je sais que ce n'est pas un bon exemple à montrer, mais mes aînés n'ont que ce genre d'exigence

2
votes

vous pouvez utiliser l'option -> legend.maxLines
pour ajouter plus de lignes à la légende.

note: cette option ne fonctionne qu'avec -> legend.position = top

voir l'extrait de travail suivant ...

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donutchart" style="width: 100%; height: 550px;"></div>

google.charts.load('current', {
  'packages': ['corechart'],
  'language': 'hi_IN'
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ["Outlet", "Amount"],
    ["S0001", 7153214],
    ["S0002", 1319026],
    ["S0003", 1497004],
    ["S0004", 1597004],
    ["S0005", 1697004],
    ["S0006", 1797004],
    ["S0007", 1897004],
    ["S0008", 13897004],
    ["S0009", 2097004],
    ["S0010", 1597004],
    ["S00011", 1698604]
  ]);

  var options = {
    pieHole: 0.6,
    legend: {
      position: 'top',
      maxLines: 5
    },
    width: 'auto',
    height: 'auto'
  };

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

3 commentaires

hey monsieur vous là?

monsieur, je pense que cela ne peut prendre que 6 longueurs maximum car j'ai mis à jour un Array dans mon message, veuillez vérifier qu'il arrive comme ça uniquement avec une info-bulle

avec autant de données, pas sûr qu'un graphique à secteurs soit la meilleure représentation, 6 semble être le maximum - vous pourriez penser à créer votre propre légende personnalisée, voici un exemple

1
votes

Vous voudrez peut-être essayer ceci,

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donutchart" style="width: 100%; height: 550px;"></div>

google.charts.load('current', {
  'packages': ['corechart'],
  'language': 'hi_IN'
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ["Outlet", "Amount"],
    ["S0001", 7153214],
    ["S0002", 1319026],
    ["S0003", 1497004],
    ["S0004", 1597004],
    ["S0005", 1697004],
    ["S0006", 1797004],
    ["S0007", 1897004],
    ["S0008", 13897004],
    ["S0009", 2097004],
    ["S0010", 1597004],
    ["S00011", 1698604],
    ["S00012", 1698604],
    ["S00013", 1698604],
    ["S00014", 1698604],
    ["S00015", 1698604],
    ["S00016", 1698604],
    ["S00017", 1698604],
    ["S00018", 1698604],
    ["S00019", 1698604]
  ]);
  


  var options = {
    pieHole: 0.3,
    legend: {
      position: 'top',
      maxLines: data.getNumberOfRows()
    },
    width: 'auto',

    height: 'auto'
  };
  var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
  chart.draw(data, options);
}

cela vous donnera toujours un nombre suffisant de lignes pour que vous pouvez avoir toutes vos légendes sur une seule page sans avoir à faire défiler

legend: {
  position: 'top',
  maxLines: data.getNumberOfRows()/4
}

legend: {
  position: 'top',
  maxLines: data.getNumberOfRows()
}

1 commentaires

le type de données que je possède ne prend que des données dans l'info-bulle, je pense que je dois utiliser une autre bibliothèque, merci pour votre aide