请参考此小提琴:https://jsfiddle.net/4mxhogmd/1/
我在chart.js上工作如果你在fiddle中看到,你会注意到,在某些情况下,条形图顶部的值没有正确显示(超出画布),而研究我遇到了这个链接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
}
}]
}
}
});
我想要的是,在所有情况下,只在顶部显示值。
9条答案
按热度按时间hfwmuf9z1#
我从myChart中提取了定义的数据,这样我就可以从数据集中提取最大值。然后在yAxes中,您可以将最大刻度设置为最大值+数据集中的10。这确保了图表中顶部的条形不会超出画布的边缘,也不会显示它们的值。
第一个
xxb16uws2#
最快的方法,我发现这样做是使用这个插件:https://github.com/chartjs/chartjs-plugin-datalabels
只需将插件导入到js文件即可将标签添加到您的图表中,例如:
如果您想在顶部(全局)应用它的值,只需在代码中设置以下选项:
您可以在此处找到更多选项:https://chartjs-plugin-datalabels.netlify.com/options.html
kmynzznz3#
这里有一个更强大的解决方案,它将在轴高度接近条形高度的情况下,在条形内显示数据点值。换句话说,如果文本将超出画布可见区域,它将在条形上方和/或条形下方显示值。
您可以通过在图表选项中添加below属性来启用图表以使用插件。
tcomlyy64#
这在我的情况下工作。(下面的插件部分)
快乐编码。
mbyulnm05#
您可以使用在图表内添加一些填充选项
x7yiwoj46#
你可以考虑在每个栏的顶部显示数据值的插件。
实时代码:Link
nwnhqdif7#
请尝试以下选项:
4smxwvx58#
这在我的情况下工作,但它的显示值在中间的酒吧。
svmlkihl9#
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 } }] } } });
个月