web-dev-qa-db-fra.com

comment afficher les valeurs de données sur Chart.js

Je voudrais demander s'il est possible d'utiliser Chart.js pour afficher les valeurs de données? Je veux imprimer le graphique.

Merci pour tout conseil.

javascriptchart.js
85
FuSsA

Edition tardive: il existe un plugin officiel pour Chart.js 2.7.0+ pour le faire: https://github.com/chartjs/chartjs-plugin-datalabels

Réponse originale:

Vous pouvez parcourir les points/barres surAnimationComplete et afficher les valeurs.

Aperçu

enter image description here

HTML

<canvas id="myChart1" height="300" width="500"></canvas>
<canvas id="myChart2" height="300" width="500"></canvas>

Script 

var chartData = {
    labels: ["January", "February", "March", "April", "May", "June"],
    datasets: [
        {
            fillColor: "#79D1CF",
            strokeColor: "#79D1CF",
            data: [60, 80, 81, 56, 55, 40]
        }
    ]
};

var ctx = document.getElementById("myChart1").getContext("2d");
var myLine = new Chart(ctx).Line(chartData, {
    showTooltips: false,
    onAnimationComplete: function () {

        var ctx = this.chart.ctx;
        ctx.font = this.scale.font;
        ctx.fillStyle = this.scale.textColor
        ctx.textAlign = "center";
        ctx.textBaseline = "bottom";

        this.datasets.forEach(function (dataset) {
            dataset.points.forEach(function (points) {
                ctx.fillText(points.value, points.x, points.y - 10);
            });
        })
    }
});

var ctx = document.getElementById("myChart2").getContext("2d");
var myBar = new Chart(ctx).Bar(chartData, {
    showTooltips: false,
    onAnimationComplete: function () {

        var ctx = this.chart.ctx;
        ctx.font = this.scale.font;
        ctx.fillStyle = this.scale.textColor
        ctx.textAlign = "center";
        ctx.textBaseline = "bottom";

        this.datasets.forEach(function (dataset) {
            dataset.bars.forEach(function (bar) {
                ctx.fillText(bar.value, bar.x, bar.y - 5);
            });
        })
    }
});

Violon - http://jsfiddle.net/uh9vw0ao/

115
potatopeelings

Voici une version mise à jour pour Chart.js 2.3

23 septembre 2016: Modification de mon code pour qu'il fonctionne avec la v2.3 pour les deux types de lignes/barres.

Important: Même si vous n'avez pas besoin de l'animation, ne changez pas l'option duration en 0, sinon vous obtiendrez chartInstance.controller n'est pas défini erreur.

var chartData = {
    labels: ["January", "February", "March", "April", "May", "June"],
        datasets: [
            {
                fillColor: "#79D1CF",
                strokeColor: "#79D1CF",
                data: [60, 80, 81, 56, 55, 40]
            }
        ]
    };

var opt = {
    events: false,
    tooltips: {
        enabled: false
    },
    hover: {
        animationDuration: 0
    },
    animation: {
        duration: 1,
        onComplete: function () {
            var chartInstance = this.chart,
                ctx = chartInstance.ctx;
            ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';

            this.data.datasets.forEach(function (dataset, i) {
                var meta = chartInstance.controller.getDatasetMeta(i);
                meta.data.forEach(function (bar, index) {
                    var data = dataset.data[index];                            
                    ctx.fillText(data, bar._model.x, bar._model.y - 5);
                });
            });
        }
    }
};
 var ctx = document.getElementById("Chart1"),
     myLineChart = new Chart(ctx, {
        type: 'bar',
        data: chartData,
        options: opt
     });
<canvas id="myChart1" height="300" width="500"></canvas>
69
Ross

Cette option d'animation fonctionne pour 2.1.3 sur un graphique à barres.

Réponse @Ross légèrement modifiée

animation: {
duration: 0,
onComplete: function () {
    // render the value of the chart above the bar
    var ctx = this.chart.ctx;
    ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
    ctx.fillStyle = this.chart.config.options.defaultFontColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    this.data.datasets.forEach(function (dataset) {
        for (var i = 0; i < dataset.data.length; i++) {
            var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
            ctx.fillText(dataset.data[i], model.x, model.y - 5);
        }
    });
}}
30
Aaron Hudon

Sur la base de la réponse de @ Ross pour Chart.js 2.0 et plus, il a fallu inclure un petit Tweak pour me protéger contre le cas où la hauteur de la barre est trop choisie pour la limite d'échelle.

Example

L'attribut animation de l'option du graphique à barres:

animation: {
            duration: 500,
            easing: "easeOutQuart",
            onComplete: function () {
                var ctx = this.chart.ctx;
                ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
                ctx.textAlign = 'center';
                ctx.textBaseline = 'bottom';

                this.data.datasets.forEach(function (dataset) {
                    for (var i = 0; i < dataset.data.length; i++) {
                        var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
                            scale_max = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight;
                        ctx.fillStyle = '#444';
                        var y_pos = model.y - 5;
                        // Make sure data value does not get overflown and hidden
                        // when the bar's value is too close to max value of scale
                        // Note: The y value is reverse, it counts from top down
                        if ((scale_max - model.y) / scale_max >= 0.93)
                            y_pos = model.y + 20; 
                        ctx.fillText(dataset.data[i], model.x, y_pos);
                    }
                });               
            }
        }
18
Hung Tran

Je pense que la meilleure option pour faire cela dans chartJS v2.x est d'utiliser un plugin, de sorte que vous n'avez pas un gros bloc de code dans les options. En outre, cela empêche les données de disparaître lors du survol d'une barre.

C'est à dire. utilisez simplement ce code, qui enregistre un plugin qui ajoute le texte après le tracé du graphique.

Chart.pluginService.register({
    afterDraw: function(chartInstance) {
        var ctx = chartInstance.chart.ctx;

        // render the value of the chart above the bar
        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';

        chartInstance.data.datasets.forEach(function (dataset) {
            for (var i = 0; i < dataset.data.length; i++) {
                var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
                ctx.fillText(dataset.data[i], model.x, model.y - 2);
            }
        });
  }
});
17
David

Si vous utilisez le plugin chartjs-plugin-datalabels alors l'objet d'options de code suivant vous aidera

Assurez-vous que vous importez import 'chartjs-plugin-datalabels'; dans votre fichier TypeScript ou ajoutez une référence à <script src="chartjs-plugin-datalabels.js"></script> dans votre fichier javascript.

options: {
    maintainAspectRatio: false,
    responsive: true,
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
        }
      }]
    },
    plugins: {
      datalabels: {
        anchor: 'end',
        align: 'top',
        formatter: Math.round,
        font: {
          weight: 'bold'
        }
      }
    }
  }
9
Karthik

Suite à ceci bonne réponse , j'utiliserais ces options pour un diagramme à barres:

var chartOptions = {
    animation: false,
    responsive : true,
    tooltipTemplate: "<%= value %>",
    tooltipFillColor: "rgba(0,0,0,0)",
    tooltipFontColor: "#444",
    tooltipEvents: [],
    tooltipCaretSize: 0,
    onAnimationComplete: function()
    {
        this.showTooltip(this.datasets[0].bars, true);
    }
};

window.myBar = new Chart(ctx1).Bar(chartData, chartOptions);

Bar Chart

Celui-ci utilise toujours le système d’info-bulles et ses avantages (positionnement automatique, création de modèles, ...) mais masque les décors (couleur de fond, caret, ...)

7
Pierre de LESPINAY

Je recommanderais d'utiliser ce plugin: https://github.com/chartjs/chartjs-plugin-datalabels

Des étiquettes peuvent être ajoutées à vos graphiques simplement en important le plugin dans le fichier js, par exemple:

import 'chartjs-plugin-datalabels'

Et peut être ajusté en utilisant ces docs: https://chartjs-plugin-datalabels.netlify.com/options.html

6
DavidX

A partir d'exemples de chart.js (fichier Chart.js-2.4.0/samples/data_labelling.html):

`` `// Définir un plugin pour fournir des étiquettes de données

    Chart.plugins.register({
        afterDatasetsDraw: function(chartInstance, easing) {
            // To only draw at the end of animation, check for easing === 1
            var ctx = chartInstance.chart.ctx;

            chartInstance.data.datasets.forEach(function (dataset, i) {
                var meta = chartInstance.getDatasetMeta(i);
                if (!meta.hidden) {
                    meta.data.forEach(function(element, index) {
                        // Draw the text in black, with the specified font
                        ctx.fillStyle = 'rgb(0, 0, 0)';

                        var fontSize = 16;
                        var fontStyle = 'normal';
                        var fontFamily = 'Helvetica Neue';
                        ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);

                        // Just naively convert to string for now
                        var dataString = dataset.data[index].toString();

                        // Make sure alignment settings are correct
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';

                        var padding = 5;
                        var position = element.tooltipPosition();
                        ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
                    });
                }
            });
        }
    });

`` `

6
Radek Dest

Edited @ ajhuddy répond un peu. Uniquement pour les graphiques à barres . Ma version ajoute:

  • Fondu dans l'animation pour les valeurs.
  • Prévenez l'écrêtage en plaçant la valeur à l'intérieur de la barre si celle-ci est trop haute.
  • Aucun clignotement.

Example

Inconvénient: lorsque vous passez la souris sur une barre contenant une valeur, celle-ci peut sembler légèrement irrégulière. Je n'ai pas trouvé de solution pour désactiver les effets de survol. Cela peut également nécessiter des ajustements en fonction de vos propres paramètres.

Configuration:

bar: {
  tooltips: {
    enabled: false
  },
  hover: {
    animationDuration: 0
  },
  animation: {
    onComplete: function() {
      this.chart.controller.draw();
      drawValue(this, 1);
    },
    onProgress: function(state) {
      var animation = state.animationObject;
      drawValue(this, animation.currentStep / animation.numSteps);
    }
  }
}

Aides:

// Font color for values inside the bar
var insideFontColor = '255,255,255';
// Font color for values above the bar
var outsideFontColor = '0,0,0';
// How close to the top Edge bar can be before the value is put inside it
var topThreshold = 20;

var modifyCtx = function(ctx) {
  ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
  ctx.textAlign = 'center';
  ctx.textBaseline = 'bottom';
  return ctx;
};

var fadeIn = function(ctx, obj, x, y, black, step) {
  var ctx = modifyCtx(ctx);
  var alpha = 0;
  ctx.fillStyle = black ? 'rgba(' + outsideFontColor + ',' + step + ')' : 'rgba(' + insideFontColor + ',' + step + ')';
  ctx.fillText(obj, x, y);
};

var drawValue = function(context, step) {
  var ctx = context.chart.ctx;

  context.data.datasets.forEach(function (dataset) {
    for (var i = 0; i < dataset.data.length; i++) {
      var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
      var textY = (model.y > topThreshold) ? model.y - 3 : model.y + 20;
      fadeIn(ctx, dataset.data[i], model.x, textY, model.y > topThreshold, step);
    }
  });
};
4
Janne Annala

D'après mon expérience, une fois que vous avez inclus le plugin chartjs-plugin-datalabels (assurez-vous de placer la balise <script> après la balise chart.js sur votre page), vos graphiques commencent à afficher des valeurs. .

Si vous le souhaitez, vous pouvez le personnaliser pour répondre à vos besoins. La personnalisation est clairement documentée ici mais fondamentalement, le format ressemble à cet exemple hypothétique:

var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: yourDataObject,
    options: {
        // other options
        plugins: {
            datalabels: {
                anchor :'end',
                align :'top',
                // and if you need to format how the value is displayed...
                formatter: function(value, context) {
                    return GetValueFormatted(value);
                }
            }
        }
    }
});
3
Soma Mbadiwe