web-dev-qa-db-fra.com

Info bulle graphique.js se faire couper

J'utilise un graphique à secteurs Chart.js avec des info-bulles qui sont coupés pour une raison quelconque.

Capture d'écran jointe, n'a trouvé aucun attribut/option pour s'en occuper ..

Y a-t-il un moyen de s'en occuper?Tooltip being cut

Merci!

javascriptcanvaschart.js
20
Idan Gozlan

Cette coupure incorrecte a été soulevée comme problème n ° 622 dans le référentiel Github de ChartJS.

Cela a été déterminé pour être un bogue (évidemment ce bogue n'a pas encore été corrigé)

https://github.com/nnnick/Chart.js/issues/622

En réponse à ce problème, Robert Turrall a une solution qui, selon lui, constitue une bonne solution de contournement. Voici sa solution proposée:

Je suis sûr que cela est dû au fait que les info-bulles sont générées dans les limites de la toile, ce qui rend difficile à fixer.

J'avais le même problème sur mon tableau en anneau et je l'ai résolu par implémenter des info-bulles personnalisées selon l'exemple du dossier samples - travaillé en conjonction avec les paramètres de police et de taille de texte de la bulle d'aide existants dans le code d'initialisation du graphique:

var myDoughnutChart = new Chart(donut).Doughnut(donutdata, {
  tooltipFontSize: 10,
  tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>hrs",
  percentageInnerCutout : 70
});

Consultez samples/pie-customTooltips.html pour le code d'info-bulle personnalisé . Copier/coller et ça a fonctionné tout de suite. Très heureux! 

L'info-bulle s'affiche bien en dehors des limites du canevas:

PS: Il y a aussi un exemple de graphique en courbes qui, je suppose, fonctionnera bien avec les graphiques à barres.

18
markE

J'ai trouvé une solution de contournement pour cela. J'ai des étiquettes vierges sur mon axe x, alors je viens d'ajouter une étiquette avec plusieurs espaces pour la dernière entrée. Cela a permis à ChartJS de laisser suffisamment d’espace pour l’ajustement de l’étiquette, ce qui laisse également assez de place pour l’affichage de l’info-bulle.

De plus, j'ai de grands cercles pour mes points de données et le dernier à droite était en train de se couper avant. L'ajout d'espace supplémentaire à l'étiquette a également résolu le problème.

Voici le code où je crée mes étiquettes. La ratings correspond à mes données réelles définies précédemment:

// Add blank labels and "Today"
for (i=0; i<ratings.length; i++) {
  labels.Push("");
}
labels[ratings.length-1] = "       ";

var data = {
  labels: labels,
  datasets: [
      {
          label: "Progress",
          strokeColor: "rgba(255,165,0,1.0)",
          pointColor: "white",
          pointStrokeColor: "rgba(255,165,0,1.0)",
          pointHighlightStroke: "#B87700",
          data: ratings
      }
  ]
};

Même si votre graphique contient des étiquettes réelles, vous pouvez ajouter des espaces à votre dernière étiquette pour l'agrandir. Si vous centrez votre étiquette, vous pouvez ajouter la même quantité d’espace avant et après.

Évidemment, il y aura des limites là où cela fonctionnera ou ne fonctionnera pas pour vous, mais pour mon cas, j'ai ajouté 7 espaces et tout semble bien maintenant.

Aussi, mon cas avait un problème du côté droit, alors que cette question a un problème avec le côté gauche. Le même correctif devrait fonctionner, mais en plaçant l'espace sur la première étiquette.

3
MindJuice

Dans mon cas, j'ai pu contourner ce problème en réduisant la quantité de texte dans l'info-bulle. Je l'ai fait en utilisant des rappels d'infobulle personnalisés pour spécifier le texte de l'étiquette. Mon initialisation ressemblait à ceci:

var chart = new Chart(canvas.getContext("2d"), {
    type: 'line',
    data: chartData,
    options: {
        responsive: true,
        tooltips: {
            callbacks: {
                title: function(tooltipItems, data) {
                    return tooltipItems[0].xLabel;
                },
                label: function(tooltipItems, data) {
                    return tooltipItems.yLabel;
                },
            }
        },
    },
});

Il semble y avoir un correctif disponible qui n'a pas encore été intégré au projet: https://github.com/chartjs/Chart.js/pull/1064

2
DPG

Il semble que Chart.js ne sache pas dans quelle direction afficher l'info-bulle, car il ne peut pas détecter la taille de son élément lorsqu'il s'étend au-delà de la zone de dessin.

Dans mon scénario, je l'ai corrigé en comprimant le texte de cette info-bulle avec les options suivantes pour l'objet options:

        tooltips.titleMarginBottom = 1;
        tooltips.bodySpacing = 1;
        tooltips.yPadding = 2;

De manière assez fréquente, Chart.js décide alors correctement d'afficher l'info-bulle à gauche de la souris et non en dessous de . Ce serait bien si vous pouviez choisir la direction dans laquelle l'info-bulle apparaît par rapport à la souris.

1
Peheje

Vous pouvez ajouter un remplissage interne au graphique. Par exemple, dans mon cas, une info-bulle apparaît à droite.

                    options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutoutPercentage: 60,
                    legend: {
                        display: false
                    },
                    animation: {
                        animateRotate: false
                    },
                    layout: {
                        padding: {
                            right: 40
                        }
                    }
                }
0
Mike Eshva