web-dev-qa-db-fra.com

Chart.js v2: Comment faire en sorte que les info-bulles apparaissent toujours sur un graphique à secteurs?

J'ai trouvé questions similaires dans Stack Overflow, mais toutes ont été abordées il y a un et deux ans. Chart.js est maintenant disponible dans la version 2 et de nombreuses modifications de la documentation. Quelqu'un peut-il m'aider s'il vous plaît à m'aider à montrer un exemple de camembert avec des étiquettes - ou un camembert avec toutes les info-bulles de son segment sont visibles?

[~ # ~] met à jour [~ # ~]

Grâce à @potatopeelings, sa réponse fonctionne parfaitement pour Chart.js v2.1.

Bien que j'avais initialement demandé comment afficher en permanence les info-bulles sur un graphique à secteurs, j'ai trouvé une meilleure solution: afficher les valeurs sous forme d'étiquettes en pourcentage! Il est maintenant activé pour le graphique à secteurs dans Chart.js v2.1. Dans les options du graphique:

animation: {
  duration: 0,
  onComplete: function () {
    var self = this,
        chartInstance = this.chart,
        ctx = chartInstance.ctx;

    ctx.font = '18px Arial';
    ctx.textAlign = "center";
    ctx.fillStyle = "#ffffff";

    Chart.helpers.each(self.data.datasets.forEach(function (dataset, datasetIndex) {
        var meta = self.getDatasetMeta(datasetIndex),
            total = 0, //total values to compute fraction
            labelxy = [],
            offset = Math.PI / 2, //start sector from top
            radius,
            centerx,
            centery, 
            lastend = 0; //prev arc's end line: starting with 0

        for (var val of dataset.data) { total += val; } 

        Chart.helpers.each(meta.data.forEach( function (element, index) {
            radius = 0.9 * element._model.outerRadius - element._model.innerRadius;
            centerx = element._model.x;
            centery = element._model.y;
            var thispart = dataset.data[index],
                arcsector = Math.PI * (2 * thispart / total);
            if (element.hasValue() && dataset.data[index] > 0) {
              labelxy.Push(lastend + arcsector / 2 + Math.PI + offset);
            }
            else {
              labelxy.Push(-1);
            }
            lastend += arcsector;
        }), self)

        var lradius = radius * 3 / 4;
        for (var idx in labelxy) {
          if (labelxy[idx] === -1) continue;
          var langle = labelxy[idx],
              dx = centerx + lradius * Math.cos(langle),
              dy = centery + lradius * Math.sin(langle),
              val = Math.round(dataset.data[idx] / total * 100);
          ctx.fillText(val + '%', dx, dy);
        }

    }), self);
  }
},
javascriptjquerychartspie-chartchart.js
26
Danny

Solution pour ChartJs Version> 2.1.5:

Chart.pluginService.register({
  beforeRender: function (chart) {
    if (chart.config.options.showAllTooltips) {
        // create an array of tooltips
        // we can't use the chart tooltip because there is only one tooltip per chart
        chart.pluginTooltips = [];
        chart.config.data.datasets.forEach(function (dataset, i) {
            chart.getDatasetMeta(i).data.forEach(function (sector, j) {
                chart.pluginTooltips.Push(new Chart.Tooltip({
                    _chart: chart.chart,
                    _chartInstance: chart,
                    _data: chart.data,
                    _options: chart.options.tooltips,
                    _active: [sector]
                }, chart));
            });
        });

        // turn off normal tooltips
        chart.options.tooltips.enabled = false;
    }
},
  afterDraw: function (chart, easing) {
    if (chart.config.options.showAllTooltips) {
        // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
        if (!chart.allTooltipsOnce) {
            if (easing !== 1)
                return;
            chart.allTooltipsOnce = true;
        }

        // turn on tooltips
        chart.options.tooltips.enabled = true;
        Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
            tooltip.initialize();
            tooltip.update();
            // we don't actually need this since we are not animating tooltips
            tooltip.pivot();
            tooltip.transition(easing).draw();
        });
        chart.options.tooltips.enabled = false;
    }
  }
});
28
Fl0R1D3R

Avec le nouveau Chart.js 2.1, vous pouvez écrire un plugin pour le faire et le contrôler via une propriété options

Aperçu

enter image description here

Script

Notez que vous devez enregistrer le plug-in avant d'initialiser le graphique.

Chart.pluginService.register({
    beforeRender: function (chart) {
        if (chart.config.options.showAllTooltips) {
            // create an array of tooltips
            // we can't use the chart tooltip because there is only one tooltip per chart
            chart.pluginTooltips = [];
            chart.config.data.datasets.forEach(function (dataset, i) {
                chart.getDatasetMeta(i).data.forEach(function (sector, j) {
                    chart.pluginTooltips.Push(new Chart.Tooltip({
                        _chart: chart.chart,
                        _chartInstance: chart,
                        _data: chart.data,
                        _options: chart.options,
                        _active: [sector]
                    }, chart));
                });
            });

            // turn off normal tooltips
            chart.options.tooltips.enabled = false;
        }
    },
    afterDraw: function (chart, easing) {
        if (chart.config.options.showAllTooltips) {
            // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
            if (!chart.allTooltipsOnce) {
                if (easing !== 1)
                    return;
                chart.allTooltipsOnce = true;
            }

            // turn on tooltips
            chart.options.tooltips.enabled = true;
            Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
                tooltip.initialize();
                tooltip.update();
                // we don't actually need this since we are not animating tooltips
                tooltip.pivot();
                tooltip.transition(easing).draw();
            });
            chart.options.tooltips.enabled = false;
        }
    }
});

et alors

new Chart(ctx, {
    type: 'pie',
    data: data,
    options: {
        showAllTooltips: true
        ...

Avec l'ancienne version 2.x, vous devriez pouvoir déplacer la même chose (ou similaire, je ne suis pas sûre de la structure de données précédente) vers la options.animation.onComplete

Fiddle - http://jsfiddle.net/q15ta78q/

15
potatopeelings

Je cherchais une solution similaire et suis tombé sur ce plugin chartjs Chart.PieceLabel.js . Il a des configurations pour afficher des modes tels que libellé, valeur et pourcentage.

10
indusBull