cách hiển thị giá trị dữ liệu trên Chart.js

Tôi muốn hỏi liệu có thể sử dụng Chart.js không để hiển thị các giá trị dữ liệu? Tôi muốn in biểu đồ.

Cảm ơn vì bất kỳ lời khuyên.

Chỉnh sửa muộn: có một plugin chính thức cho Chart.js 2.7.0+để thực hiện việc này: https://github.com/chartjs/chartjs-plugin-datalabels

Câu trả lời ban đầu:

Bạn có thể lặp qua các điểm / thanh trênAnimationComplete và hiển thị các giá trị

Xem trước

HTML

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

Kịch bản

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

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

Đây là phiên bản cập nhật cho Chart.js 2.3

Ngày 23 tháng 9 năm 2016: Đã chỉnh sửa mã của tôi để hoạt động với v2.3 cho cả loại dòng / thanh.

Quan trọng: Ngay cả khi bạn không cần hoạt ảnh, đừng thay đổi tùy chọn thời lượng thành 0, nếu không, bạn sẽ nhận được lỗi chartInstance.controller là không xác định .

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>

Tùy chọn hoạt ảnh này hoạt động cho 2.1.3 trên biểu đồ thanh.

Câu trả lời @Ross được sửa đổi một chút

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

Tôi nghĩ tùy chọn tốt nhất để làm điều này trong chartJS v2.x là sử dụng plugin, vì vậy bạn không có một khối mã lớn trong các tùy chọn. Ngoài ra, nó còn ngăn dữ liệu biến mất khi di chuột qua một thanh.

Tức là chỉ cần sử dụng mã này, mã này đăng ký một plugin bổ sung văn bản sau khi biểu đồ được vẽ.

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

Dựa trên câu trả lời câu trả lời của @ Ross cho Chart.js 2.0 trở lên, tôi đã phải thêm một chút điều chỉnh để đề phòng trường hợp độ cao của thanh quá chọn đến ranh giới tỷ lệ.

Các animationthuộc tính của tùy chọn biểu đồ thanh của:

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

Nếu bạn đang sử dụng plugin chartjs-plugin-datalabels thì đối tượng tùy chọn mã sau sẽ giúp

Đảm bảo rằng bạn nhập import 'chartjs-plugin-datalabels';vào tệp bảng chữ của mình hoặc thêm tham chiếu <script src="chartjs-plugin-datalabels.js"></script>vào tệp javascript của bạn.

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

Sau câu trả lời hay này , tôi sẽ sử dụng các tùy chọn này cho biểu đồ thanh:

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

Điều này vẫn sử dụng hệ thống chú giải công cụ và các lợi thế của mình (tự động định vị, tạo khuôn mẫu, ...) nhưng ẩn các trang trí (màu nền, dấu mũ, ...)

Từ các mẫu chart.js (tệp Chart.js-2.4.0 / samples / data_labelling.html):

`` `// Xác định một plugin để cung cấp các nhãn dữ liệu

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

``

Tôi khuyên bạn nên sử dụng plugin này: https://github.com/chartjs/chartjs-plugin-datalabels

Các nhãn có thể được thêm vào biểu đồ của bạn chỉ bằng cách nhập plugin vào tệp js, ví dụ:

import 'chartjs-plugin-datalabels'

Và có thể được tinh chỉnh bằng cách sử dụng các tài liệu sau: https://chartjs-plugin-datalabels.netlify.com/options.html

Đã chỉnh sửa câu trả lời của @ ajhuddy một chút. Chỉ dành cho biểu đồ thanh . Phiên bản của tôi bổ sung:

• Làm mờ hình ảnh động cho các giá trị.
• Ngăn chặn cắt bằng cách định vị giá trị bên trong thanh nếu thanh quá cao.
• Không chớp mắt.

Nhược điểm: Khi di chuột qua một thanh có giá trị bên trong nó, giá trị có thể trông hơi lởm chởm. Tôi đã không tìm thấy một giải pháp để vô hiệu hóa hiệu ứng di chuột. Nó cũng có thể cần điều chỉnh tùy thuộc vào cài đặt của riêng bạn.

Cấu hình:

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

Người trợ giúp:

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

Theo kinh nghiệm của tôi, khi bạn bao gồm plugin chartjs-plugin-datalabels (đảm bảo đặt <script>thẻ sau thẻ chart.js trên trang của bạn), biểu đồ của bạn sẽ bắt đầu hiển thị các giá trị.

Nếu bạn chọn, bạn có thể tùy chỉnh nó để phù hợp với nhu cầu của bạn. Tùy chỉnh được ghi lại rõ ràng ở đây nhưng về cơ bản, định dạng giống như ví dụ giả định sau:

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