Javascript 如何在Chart.js上显示数据值

我想问一下，是否可以使用Chart.js来显示数据值？ 我想打印图表

---

感谢您的建议。

后期编辑：有一个官方插件，用于Chart.js

2.7.0+

执行此操作：

原始答案：

您可以在NimationComplete上循环浏览点/条并显示值

---

预览

---

HTML

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

---

Fiddle-

接下来，我将使用以下选项制作条形图：

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

var图表选项={
动画：错，
回答：是的，
工具脚本模板：“”，
工具提示FillColor:“rgba（0,0,0,0）”，
tooltipFontColor:#444“，
工具管道事件：[]，
ToolTiCaretSize:0，
onAnimationComplete:function（）
{
this.showTooltip（this.dataset[0].bar，true）；
}
};
window.myBar=新图表（ctx1）.Bar（图表数据，图表选项）；

---

这仍然使用了工具提示系统和他的优点（自动定位、模板等），但隐藏了装饰（背景色、插入符号等）

这是Chart.js 2.3的更新版本

2016年9月23日：编辑了我的代码，以便在v2.3中使用线条/条形图类型

重要提示：即使不需要动画，也不要将“持续时间”选项更改为0，否则将得到chartInstance.controller未定义错误

var chartData={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”]，
数据集：[
{
fillColor:#79D1CF“，
strokeColor:#79D1CF“，
数据：[60,80,81,56,55,40]
}
]
};
变量opt={
事件：错误，
工具提示：{
已启用：false
},
悬停：{
动画持续时间：0
},
动画：{
持续时间：1，
onComplete:函数（）{
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='中心'；
ctx.textb基线='底部'；
this.data.datasets.forEach（函数（dataset，i）{
var meta=chartInstance.controller.getDatasetMeta（i）；
meta.data.forEach（函数（条、索引）{
var数据=数据集。数据[索引]；
填充文本（数据，条._model.x，条._model.y-5）；
});
});
}
}
};
var ctx=document.getElementById（“图表1”），
myLineChart=新图表（ctx{
类型：'bar'，
数据：图表数据，
选项：选择
});
此动画选项适用于条形图上的2.1.3

略加修改@Ross答案

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

动画：{
持续时间：0，
onComplete:函数（）{
//在条形图上方呈现图表的值
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='中心'；
ctx.textb基线='底部'；
this.data.datasets.forEach（函数（数据集）{
对于（var i=0；i
我认为在chartJS v2.x中实现这一点的最佳选择是使用插件，因此选项中没有大量代码。此外，它还可以防止数据在悬停在条形图上时消失

也就是说，只需使用此代码，即可注册一个插件，在绘制图表后添加文本

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

Chart.pluginService.register({
afterDraw:函数（chartInstance）{
var ctx=chartInstance.chart.ctx；
//在条形图上方呈现图表的值
ctx.font=Chart.helpers.fontString（Chart.defaults.global.defaultFontSize，'normal'，Chart.defaults.global.defaultFontFamily）；
ctx.textAlign='中心'；
ctx.textb基线='底部'；
chartInstance.data.datasets.forEach（函数（数据集）{
对于（var i=0；i
根据@Ross对Chart.js 2.0及更高版本的回答，我不得不加入一些小调整，以防止条形图的高度过于接近比例边界


条形图选项的
动画
属性：

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

动画：{
持续时间：500，
放松：“放松夸脱”，
onComplete:函数（）{
var ctx=this.chart.ctx；
ctx.font=Chart.helpers.fontString（Chart.defaults.global.defaultFontFamily，'normal'，Chart.defaults.global.defaultFontFamily）；
ctx.textAlign='中心'；
ctx.textb基线='底部'；
this.data.datasets.forEach（函数（数据集）{
对于（var i=0；ianimation: {
            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);
                    }
                });               
            }
        }

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

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

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

import 'chartjs-plugin-datalabels'

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

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

yAxes: [{
    ticks: {
      stepSize: Math.round((1.05*(Math.max.apply(Math, myListOfyValues)) / 10)/5)*5,
      suggestedMax: 1.05*(Math.max.apply(Math, myListOfyValues)),
        beginAtZero: true,
        precision: 0
    }
}]