web-dev-qa-db-fra.com

Chart.js: changement de modèle d'info-bulle

Je dois changer le modèle d'info-bulle Chart.js, de sorte que seule la partie valeur soit affichée en gras. Il existe une option tooltipTemplate, qui devrait faire exactement cela. La valeur par défaut de cette option est:

tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>%"

J'ai essayé de le modifier comme ceci:

tooltipTemplate: "<%if (label){%><%=label%>: <%}%><strong><%= value %></strong>%"

Mais il affiche les balises strong à l'écran dans le cadre du texte, au lieu de rendre le texte en gras. J'ai essayé de les déplacer autour de <% et %>, mais cela ne fonctionne toujours pas. Des idées?

javascriptchart.js
9
cincplug

Le modèle ne reconnaît pas le HTML. Vous devez utiliser l'option customTooltips. Ci-dessous, un exemple adapté (mais non optimisé) de https://github.com/nnnick/Chart.js/blob/master/samples/line-customTooltips.html

HTML

<canvas id="myChart" width="400" height="200"></canvas>
<div id="chartjs-tooltip"></div>

CSS

#chartjs-tooltip {
     opacity: 0;
     position: absolute;
     background: rgba(0, 0, 0, .7);
     color: white;
     padding: 3px;
     border-radius: 3px;
     -webkit-transition: all .1s ease;
     transition: all .1s ease;
     pointer-events: none;
     -webkit-transform: translate(-50%, 0);
     transform: translate(-50%, 0);
 }

JS

var ctx = $("#myChart").get(0).getContext("2d");

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [65, 59, 80, 81, 56, 55, 40]
    }]
};

var myLineChart = new Chart(ctx).Line(data, {
    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,
        });
    }
});

Fiddle - http://jsfiddle.net/6rxdo0c0/1/

13
potatopeelings

J'ai une réponse à jour en utilisant les info-bulles jquery et bootstrap 4 qui créent les div de l'info-bulle de manière dynamique . Supposons que votre code HTML est 

<canvas id="myPieChart" width="100" height="55"></canvas>

Alors utilisez ce script:

<script>  
    $(document).ready(function() {   

        let canvas = $("#donutChart")[0];
        let ctx = canvas.getContext("2d");

        let donutChart = new Chart(ctx, {
            type: 'doughnut',
            data: data,
            options: {

                tooltips: {

                    callbacks: {
                        title: function(){
                            return null;
                        },
                        label: function(tooltipItem, data) {
                            var multiline = ['First Line', 'second line'];
                            return multiline;
                        },

                    },
                    enabled: false, // the builtin tooltips cannot extend beyond the canvas

                    custom: function(tooltip) {

                        var tooltipEl = $('#chartjs-tooltip');

                        if(tooltipEl.length == 0) { // if not exists, create it
                            tooltipEl = $('<div class="tooltip fade" id="chartjs-tooltip"></div>').appendTo('body');
                        }

                        if ( !tooltip.body ) { // Hide if no tooltip
                            tooltipEl.remove();
                            return;
                        }


                        tooltipEl.removeClass('bs-tooltip-top bs-tooltip-bottom');
                        tooltipEl.addClass( 'bs-tooltip-' + (tooltip.yAlign == "bottom" ? "top" : "bottom") ); // different naming in bootstrap

                        var innerHtml = '<div class="arrow" style="left: '+tooltip.caretX+'px;"></div>'
                            + '<div class="tooltip-inner" style="max-width: none;">' + tooltip.body[0].join('<br>')
                            + '</div>';
                        tooltipEl.html( innerHtml );
                        tooltipEl.css( {
                            opacity: 1,
                            left: $("#donutChart").offset().left + tooltip.x + 'px',
                            top: $("#donutChart").offset().top + tooltip.y + 'px'
                        } );

                    },
                },
                hover: { 
                    mode: null,
                },
            }
        });
    });
</script>
0
Olli D-Metz