Javascript 在 chart.js 中的条形顶部显示值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42556835/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show values on top of bars in chart.js
提问by Kenny
Please refer this Fiddle : https://jsfiddle.net/4mxhogmd/1/
请参考这个小提琴：https: //jsfiddle.net/4mxhogmd/1/
I am working on chart.js If you see in fiddle, you will notice that value which is top on bar is not properly displayed in some cases(goes outside the canvas) While research I came across this link how to display data values on Chart.js
我正在研究 chart.js 如果您在小提琴中看到，您会注意到在某些情况下无法正确显示栏顶部的值（超出画布）在研究时我遇到了此链接如何在图表上显示数据值.js
But here they used tooltip also for same cases to the text tweak inside of bars. I don't want this.
但在这里，他们也将工具提示用于与条形内部文本调整相同的情况。我不要这个。
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["2 Jan", "9 Jan", "16 Jan", "23 Jan", "30 Jan", "6 Feb", "13 Feb"],
datasets: [{
data: [6, 87, 56, 15, 88, 60, 12],
backgroundColor: "#4082c4"
}]
},
options: {
"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);
});
});
}
},
legend: {
"display": false
},
tooltips: {
"enabled": false
},
scales: {
yAxes: [{
display: false,
gridLines: {
display : false
},
ticks: {
display: false,
beginAtZero:true
}
}],
xAxes: [{
gridLines: {
display : false
},
ticks: {
beginAtZero:true
}
}]
}
}
});
What I want is to show value on top only, for all cases.
对于所有情况，我想要的是仅在顶部显示价值。
回答by Joffutt4
I pulled out the data from being defined inside of myChart that way I could pull out the max value from the dataset. Then inside of the yAxes you can set the max ticks to be the max value + 10 from your data set. This ensures that the top bars in the graph will not go off the edge of the canvas and not display their value.
我从 myChart 中定义的数据中取出数据，这样我就可以从数据集中取出最大值。然后在 yAxes 内部，您可以将最大刻度设置为数据集中的最大值 + 10。这可确保图表中的顶部条形不会超出画布的边缘并且不会显示它们的值。
var ctx = document.getElementById("myChart");
debugger;
var data = {
labels: ["2 Jan", "9 Jan", "16 Jan", "23 Jan", "30 Jan", "6 Feb", "13 Feb"],
datasets: [{
data: [150, 87, 56, 50, 88, 60, 45],
backgroundColor: "#4082c4"
}]
}
var myChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
"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);
});
});
}
},
legend: {
"display": false
},
tooltips: {
"enabled": false
},
scales: {
yAxes: [{
display: false,
gridLines: {
display: false
},
ticks: {
max: Math.max(...data.datasets[0].data) + 10,
display: false,
beginAtZero: true
}
}],
xAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero: true
}
}]
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
<canvas id="myChart" width="100" height="100"></canvas>回答by DavidX
The fastest way I found to do this was to use this plugin: https://github.com/chartjs/chartjs-plugin-datalabels
我发现这样做的最快方法是使用这个插件：https: //github.com/chartjs/chartjs-plugin-datalabels
Labels can be added to your charts simply by importing the plugin to the js file e.g.:
只需将插件导入 js 文件，即可将标签添加到图表中，例如：
import 'chartjs-plugin-datalabels'
And if you want to apply it values on top (globally), simply set these options in your code:
如果您想在顶部（全局）应用它的值，只需在您的代码中设置这些选项：
Chart.defaults.global.plugins.datalabels.anchor = 'end';
Chart.defaults.global.plugins.datalabels.align = 'end';
More options can be found here: https://chartjs-plugin-datalabels.netlify.com/options.html
更多选项可以在这里找到：https: //chartjs-plugin-datalabels.netlify.com/options.html
回答by jordanwillis
Here is a more robust solution that will display the datapoint value inside the bar for cases where the axis height is close to the bar height. In other words, this will display the value above the bar and/or below the bar if the text will extend beyond the canvas visible area.
这是一个更强大的解决方案，它将在轴高度接近条形高度的情况下显示条形内的数据点值。换句话说，如果文本将超出画布可见区域，这将显示栏上方和/或栏下方的值。
Chart.plugins.register({
afterDraw: function(chartInstance) {
if (chartInstance.config.options.showDatapoints) {
var helpers = Chart.helpers;
var ctx = chartInstance.chart.ctx;
var fontColor = helpers.getValueOrDefault(chartInstance.config.options.showDatapoints.fontColor, chartInstance.config.options.defaultFontColor);
// 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';
ctx.fillStyle = fontColor;
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;
var scaleMax = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight;
var yPos = (scaleMax - model.y) / scaleMax >= 0.93 ? model.y + 20 : model.y - 5;
ctx.fillText(dataset.data[i], model.x, yPos);
}
});
}
}
});
You can enable your chart to use the plugin by adding the below property in your chart options.
您可以通过在图表选项中添加以下属性来启用图表以使用该插件。
showDatapoints: true,
回答by Swarnim Prabhat
You can consider plugin which show data value on top of each bar. plugins: {
您可以考虑在每个条形顶部显示数据值的插件。插件：{
afterDatasetsDraw: function (context, easing) {
var ctx = context.chart.ctx;
context.data.datasets.forEach(function (dataset) {
for (var i = 0; i < dataset.data.length; i++) {
if (dataset.data[i] != 0) {
var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
var textY = model.y + (dataset.type == "line" ? -3 : 15);
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'start';
ctx.textBaseline = 'middle';
ctx.fillStyle = dataset.type == "line" ? "black" : "black";
ctx.save();
ctx.translate(model.x, textY-15);
ctx.rotate(4.7);
ctx.fillText(dataset.data[i], 0, 0);
ctx.restore();
}
}
});
}
}
live code:Link
实时代码：链接
回答by Bandham Manikanta
This worked in my case.(plugins section below)
这在我的情况下有效。（下面的插件部分）
options: {
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
}
}]
},
plugins: {
datalabels: {
anchor: 'end',
align: 'top',
formatter: Math.round,
font: {
weight: 'bold'
}
}
}
}
Happy Coding.
快乐编码。
回答by Tabish Ali
this works in my case but its show values in mid of the bar.
这在我的情况下有效，但它在条形图的中间显示值。
chart.chart.config.options.animation["onComplete"] = function () {
var ctx = chart.chart.ctx;
ctx.font = '22px "Helvetica Neue", Helvetica, Arial, sans-serif';
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 + 50;
if ((scale_max - model.y) / scale_max >= 0.5)
y_pos = model.y + 20;
ctx.fillText(dataset.data[i], model.x, y_pos);
}
});
}
回答by Ishan Liyanage
You can use add some padding-top inside your chart options
您可以在图表选项中添加一些 padding-top
layout: {
padding: {
left: 0,
right: 0,
top: 30,
bottom: 0
}
},
