Anzeigen von Datenwerten in Chart.js

Ich möchte fragen, ob es mit Chart.js möglich ist Datenwerte anzeigen? Ich möchte das Diagramm drucken.

Vielen Dank für jeden Rat.

Späte Bearbeitung: Hierfür gibt es ein offizielles Plugin für Chart.js 2.7.0+: https://github.com/chartjs/chartjs-plugin-datalabels

Ursprüngliche Antwort:

Sie können die Punkte / Balken auf AnimationComplete durchlaufen und die Werte anzeigen

Vorschau

HTML

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

Skript

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);
            });
        })
    }
});

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

Hier ist eine aktualisierte Version für Chart.js 2.3

23. September 2016: Mein Code wurde so bearbeitet, dass er mit v2.3 für beide Zeilen- / Balkentypen funktioniert.

Wichtig: Auch wenn Sie die Animation nicht benötigen, ändern Sie die Dauer-Option nicht auf 0, da sonst der Fehler chartInstance.controller angezeigt wird .

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>

Diese Animationsoption funktioniert für 2.1.3 in einem Balkendiagramm.

Leicht modifizierte @ Ross-Antwort

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);
        }
    });
}}

Ich denke, die schönste Option, dies in chartJS v2.x zu tun, ist die Verwendung eines Plugins, sodass Sie keinen großen Codeblock in den Optionen haben. Außerdem wird verhindert, dass die Daten verschwinden, wenn Sie mit der Maus über einen Balken fahren.

Verwenden Sie einfach diesen Code, der ein Plugin registriert, das den Text nach dem Zeichnen des Diagramms hinzufügt.

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);
            }
        });
  }
});

Basierend auf der Antwort von @ Ross auf Chart.js 2.0 und höher musste ich eine kleine Änderung vornehmen, um mich vor dem Fall zu schützen, wenn die Balkenhöhen zu stark an die Skalengrenze angepasst sind.

Das animationAttribut der Option des Balkendiagramms:

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);
                    }
                });               
            }
        }

Wenn Sie das Plugin chartjs-plugin-datalabels verwenden, hilft das folgende Codeoptionsobjekt

Stellen Sie sicher, dass Sie import 'chartjs-plugin-datalabels';in Ihre Typoskriptdatei importieren oder einen Verweis auf <script src="chartjs-plugin-datalabels.js"></script>in Ihre Javascriptdatei hinzufügen .

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

Nach dieser guten Antwort würde ich diese Optionen für ein Balkendiagramm verwenden:

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);

Dies nutzt weiterhin das Tooltip-System und seine Vorteile (automatische Positionierung, Vorlage, ...), verbirgt jedoch die Dekorationen (Hintergrundfarbe, Caret, ...).

Aus den Beispielen von chart.js (Datei Chart.js-2.4.0 / samples / data_labelling.html):

`` `// Definiere ein Plugin, um Datenbeschriftungen bereitzustellen

    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);
                    });
                }
            });
        }
    });

`` `

Ich würde empfehlen, dieses Plugin zu verwenden: https://github.com/chartjs/chartjs-plugin-datalabels

Beschriftungen können einfach durch Importieren des Plugins in die js-Datei zu Ihren Diagrammen hinzugefügt werden, z.

import 'chartjs-plugin-datalabels'

Und kann mithilfe der folgenden Dokumente verfeinert werden: https://chartjs-plugin-datalabels.netlify.com/options.html

@ Ajhuddys Antwort ein wenig bearbeitet. Nur für Balkendiagramme . Meine Version fügt hinzu:

• Animation für die Werte einblenden.
• Verhindern Sie ein Übersteuern, indem Sie den Wert innerhalb des Balkens positionieren, wenn der Balken zu hoch ist.
• Kein Blinken.

Nachteil: Wenn Sie mit der Maus über einen Balken fahren, in dem sich ein Wert befindet, sieht der Wert möglicherweise etwas gezackt aus. Ich habe keine Lösung gefunden, um Hover-Effekte zu deaktivieren. Abhängig von Ihren eigenen Einstellungen muss möglicherweise auch eine Anpassung vorgenommen werden.

Aufbau:

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);
    }
  }
}

Helfer:

// 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);
    }
  });
};

Nach meiner Erfahrung sollten Sie das Plugin chartjs-plugin-datalabels einfügen (stellen Sie sicher, dass Sie das platzieren<script> Ihren Diagrammen Werte angezeigt Tag nach dem Tag chart.js auf Ihrer Seite platziert wird).

Wenn Sie sich dann entscheiden, können Sie es an Ihre Bedürfnisse anpassen. Die Anpassung ist hier klar dokumentiert, aber im Grunde ist das Format wie in diesem hypothetischen Beispiel:

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);
                }
            }
        }
    }
});