web-dev-qa-db-fra.com

Option d'infobulle personnalisée Graphique JS?

J'essaye de construire le graphique en utilisant Chart.Js. Ce chart.js a une option par défaut pour les info-bulles, je veux créer une option d’infos. Y a-t-il un moyen de le rendre possible?

Voici mon code

 var chart = null;
barChart: function (data1, data2, data3, label) {

    var data = {
        labels: label,
        datasets: [
        {
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: data1
        },
         {
             fillColor: "rgba(151,187,205,0.5)",
             strokeColor: "rgba(151,187,205,0.8)",
             highlightFill: "rgba(151,187,205,0.75)",
             highlightStroke: "rgba(151,187,205,1)",
             data: data2
         },
          {
              fillColor: "rgba(0,255,0,0.3)",
              strokeColor: "rgba(220,220,220,0.8)",
              highlightFill: "rgba(220,220,220,0.75)",
              highlightStroke: "rgba(0,255,0,0.3)",
              data: data3
          },
        ]
    }
    var cht = document.getElementById('exampleCanvas');
    var ctx = cht.getContext('2d');
    if (chart)
        chart.destroy();
    chart = new Chart(ctx).Bar(data);
}
javascriptchart.js
16
Kanagaraj Vadivel

Essaye ça:

Vous pouvez apporter des modifications globales en utilisant ce code:

Chart.defaults.global = {

    // Boolean - Determines whether to draw tooltips on the canvas or not
    showTooltips: true,

    // Array - Array of string names to attach tooltip events
    tooltipEvents: ["mousemove", "touchstart", "touchmove"],

    // String - Tooltip background colour
    tooltipFillColor: "rgba(0,0,0,0.8)",

    // String - Tooltip label font declaration for the scale label
    tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

    // Number - Tooltip label font size in pixels
    tooltipFontSize: 14,

    // String - Tooltip font weight style
    tooltipFontStyle: "normal",

    // String - Tooltip label font colour
    tooltipFontColor: "#fff",

    // String - Tooltip title font declaration for the scale label
    tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

    // Number - Tooltip title font size in pixels
    tooltipTitleFontSize: 14,

    // String - Tooltip title font weight style
    tooltipTitleFontStyle: "bold",

    // String - Tooltip title font colour
    tooltipTitleFontColor: "#fff",

    // Number - pixel width of padding around tooltip text
    tooltipYPadding: 6,

    // Number - pixel width of padding around tooltip text
    tooltipXPadding: 6,

    // Number - Size of the caret on the tooltip
    tooltipCaretSize: 8,

    // Number - Pixel radius of the tooltip border
    tooltipCornerRadius: 6,

    // Number - Pixel offset from point x to tooltip Edge
    tooltipXOffset: 10,

    // String - Template string for single tooltips
    tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",

    // String - Template string for single tooltips
    multiTooltipTemplate: "<%= value %>",

    // Function - Will fire on animation progression.
    onAnimationProgress: function(){},

    // Function - Will fire on animation completion.
    onAnimationComplete: function(){}
}

Utilisez ceci Link pour référence

9
Suganth G

J'ai utilisé ceci, je l'ai trouvé sur stackoverflow, mais j'essaie difficilement de le retrouver.

<div id="chartjs-tooltip"></div>



var chartoptions =
{
    customTooltips: function ( tooltip )
    {
        var tooltipEl = $( "#chartjs-tooltip" );
        if ( !tooltip )
        {
            tooltipEl.css( {
                opacity: 0
            } );
            return;
        }

        tooltipEl.removeClass( 'above below' );
        tooltipEl.addClass( tooltip.yAlign );

        // split out the label and value and make your own tooltip here
        var parts = tooltip.text.split( ":" );
        var innerHtml = '<span>' + parts[0].trim() + '</span> : <span><b>' + parts[1].trim() + '</b></span>';
        tooltipEl.html( innerHtml );

        tooltipEl.css( {
            opacity: 1,
            left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
            top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px',
            fontFamily: tooltip.fontFamily,
            fontSize: tooltip.fontSize,
            fontStyle: tooltip.fontStyle
        } );
    }
}

Lien vers l'endroit où je l'ai eu: Chart.js: changement de modèle d'info-bulle

5
Zeuthenjr

C'est très simple quand vous savez où mettre l'option.

La réponse consiste à ajouter l'option personnalisée lors de la création du graphique:

chart = new Chart(ctx).Bar(data, {"options goes here"} );

Après avoir passé la variable de données avec les informations de données, vous pouvez ajouter des options personnalisées. Par exemple, vous souhaitez modifier la taille du titre de l'info-bulle et vous souhaitez également définir une couleur gris clair dans le titre de l'info-bulle que vous souhaitez modifier quelque chose comme ca:

chart = new Chart(ctx).Bar(data, { 

 //Option for title font size in pixels
 tooltipTitleFontSize: 14, 

 //Option for tooltip title color
 tooltipTitleFontColor: "#eee",

});

Vous pouvez également créer un jeu d’options en tant que variable à des fins d’organisation et pouvoir le réutiliser.

    //Create a set of relevant options for you chart  

 var myoptions = { 
            scaleShowGridLines : false,     
            responsive : true, 
            scaleFontSize: 12,
            pointDotRadius : 4,
            scaleFontStyle: 14,
            scaleLabel: "<%= ' ' + value%> %",
 }  

//Create the Chart

chart = new Chart(ctx).Bar(data, myoptions);

J'espère que c'est clair maintenant

Cordialement

4
Lucas Pretti

Vous pouvez vérifier la bulle d'aide css - http://www.chartjs.org/docs/#chart-configuration-tooltip-configuration

tooltips: 
{

    bodyFontColor: "#000000", //#000000
    bodyFontSize: 50,
    bodyFontStyle: "bold",
    bodyFontColor: '#FFFFFF',
    bodyFontFamily: "'Helvetica', 'Arial', sans-serif",
    footerFontSize: 50,
    callbacks: {
        label: function(tooltipItem, data) {
                var value = data.datasets[0].data[tooltipItem.index];
              if(tooltipItem.index == 0) {
                return "<?php echo $data1;?>";
                }
            else if(tooltipItem.index == 1) {
                return "<?php echo $data2;?>";
            }
            else if(tooltipItem.index == 2) {
                return "<?php echo $data3;?>";
            }
            else {
                return "<?php echo $data4; ?>";
                }
        },
    },
},
4
Kirti Nirkhiwale

La nouvelle version de chart.js, version 2, se trouve ici:

https://github.com/nnnick/Chart.js/releases

La version 2 ajoute tooltip callbacks:

Chaque rappel d'infobulle (beforeTitle, title, afterTitle, etc.) accepte une chaîne ou un tableau. Si un tableau est utilisé, il produira plusieurs lignes. Les infobulles viennent maintenant avec beaucoup plus d'options pour la personnalisation visuelle.

Cependant il y a un fork de chart.js appelé chartNew.js, trouvé ici:

https://github.com/FVANCOP/ChartNew.js/

Il ajoute plusieurs améliorations importantes au vénérable chart.js, notamment:

  • fonctions d'info-bulle (lorsque vous téléchargez/décompressez, regardez dans le dossier Samples et regardez annotateFunction.html. Lorsque vous survolez n'importe quel point, vous pouvez tout faire.)

  • passer un tableau de couleurs à un graphique à barres (au lieu de chaque barre en série ayant la même couleur)

  • mettre du texte sur la carte où vous le voulez

beaucoup d'etceteras.

Notez que chart.js a été considérablement amélioré dans la version 2, mais la nouvelle version n’est pas totalement compatible avec les versions antérieures (le simple passage au plug-in v2 a cassé mon code existant), alors que chartNew.js fonctionnera avec l’ancien code tout en étendant les capacités.

4
gibberish

J'ai trouvé cette page utile:

https://github.com/nnnick/Chart.js/blob/master/samples/pie-customTooltips.html

Il montre où et comment définir la fonction de votre info-bulle personnalisée, ainsi qu'un exemple de style . J'ai dû modifier le code pour répondre à mes besoins, mais c'est un excellent exemple de la façon de mettre en œuvre l'info-bulle personnalisée. fonctionnalité.

Quelques choses à noter qui m'ont jeté au début:

1) L'identifiant dans les règles de style doit être modifié pour correspondre à votre div d'infobulle. (c'est évident, mais je ne l'ai pas compris au début)

2) tooltip.text suivra le format que vous avez défini pour 'tooltipTemplate' dans vos options, ou le tooltipTemplate par défaut défini dans chart.js

1
jay