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

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

感谢您的任何build议。

Answer 1

你可以通过onAnimationComplete中的点/条循环并显示值

---

预习

---

HTML

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

脚本

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

---

小提琴 – http://jsfiddle.net/uh9vw0ao/

Answer 2

这里是Chart.js 2.3的更新版本

2016年9月23日：编辑我的代码，以同时使用v2.3和line / bartypes。

重要提示：即使您不需要animation，也不要将duration选项更改为0，否则会得到chartInstance.controller是未定义的错误。

 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> 

Answer 3

此animation选项适用于条形图上的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); } }); }} 

Answer 4

我认为在chartJS v2.x中做这个最好的select是使用插件，所以在选项中没有大块代码。 另外，它可以防止数据在鼠标hover时消失。

也就是说，只需使用这个代码，该代码注册一个在绘制图表后添加文本的插件。

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

Answer 5

根据@ Ross对Chart.js 2.0及更高版本的回答，我不得不包括一些小小的调整，以防止在高度select到比例尺边界的情况下。

条形图选项的animation属性：

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

Answer 6

遵循这个良好的答案 ，我会使用这些选项的条形图：

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

这仍然使用工具提示系统和他的优点（自动定位，模板，…），但隐藏装饰（背景颜色，脱字符，…）

Answer 7

从chart.js示例（文件Chart.js-2.4.0 / samples / data_labelling.html）：

“//定义一个插件来提供数据标签

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

“`

Answer 8

@ ajhuddy编辑的答案有点。 仅限于条形图 。 我的版本增加：

• 淡入淡出animation的值。
• 如果栏太高，则通过在栏内定位值来防止剪切。
• 不闪烁。

下行：当盘旋在一个有价值的酒吧里时，价值可能看起来有点锯齿。 我还没有find一个解决scheme禁用hover效果。 也可能需要根据自己的设置进行调整。

组态：

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

Answer 9

我build议使用这个插件： https ： //github.com/chartjs/chartjs-plugin-datalabels

只需将插件导入到js文件中，即可将标签添加到您的图表中，例如：

 import 'chartjs-plugin-datalabels' 

可以使用这些文档进行优化： https : //chartjs-plugin-datalabels.netlify.com/options.html