请参阅此小提琴：https://jsfiddle.net/4mxhogmd/1/
我正在使用chart.js 如果您在小提琴中看到，您会注意到在某些情况下，在条形图上方的值未正确显示（在画布外部） 在研究过程中，我发现了这个链接how to display data values on Chart.js
但是在这里他们也使用工具提示同样的情况来调整栏内的文本。 我不想要这个。
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
}
}]
}
}
});
我想要的是在所有情况下仅在顶部显示价值。
答案 0 :(得分：27)
我从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>
答案 1 :(得分：14)
这是一个更强大的解决方案，可以在条形高度接近条形高度的情况下在条形图中显示数据点值。换句话说，如果文本将延伸到画布可见区域之外，这将在条形图上方和/或条形图下方显示值。
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);
}
});
}
}
});
您可以通过在图表选项中添加以下属性来启用图表以使用该插件。
showDatapoints: true,
答案 2 :(得分：11)
我发现这样做的最快方法是使用此插件：https://github.com/chartjs/chartjs-plugin-datalabels
只需将插件导入js文件即可将标签添加到图表中，例如：
import 'chartjs-plugin-datalabels'
如果您想在顶部（全局）应用它，只需在代码中设置这些选项：
Chart.defaults.global.plugins.datalabels.anchor = 'end';
Chart.defaults.global.plugins.datalabels.align = 'end';
可在此处找到更多选项：https://chartjs-plugin-datalabels.netlify.com/options.html
答案 3 :(得分：0)
您可以考虑在每个小节顶部显示数据值的插件。 插件：{
td.abc.xyz:not(.def),
td.abc.xyz:not(.ghi) {
/* Style to apply */
}
实时代码： Link
答案 4 :(得分：0)
这对我而言有效。（下面的插件部分）
options: {
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
}
}]
},
plugins: {
datalabels: {
anchor: 'end',
align: 'top',
formatter: Math.round,
font: {
weight: 'bold'
}
}
}
}
快乐编码。
答案 5 :(得分：0)
这在我的情况下有效，但其显示值在条中间。
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);
}
});
}
答案 6 :(得分：0)
您可以在图表选项内添加一些填充顶部
layout: {
padding: {
left: 0,
right: 0,
top: 30,
bottom: 0
}
},