在 chart.js 中的条形顶部显示值 [英] Show values on top of bars in chart.js
问题描述
请参考这个小提琴:https://jsfiddle.net/4mxhogmd/1/
我正在研究 chart.js如果您在小提琴中看到，您会注意到在某些情况下无法正确显示栏顶部的值(超出画布)在研究时，我发现了这个链接 how to display data values on Chart.js
但在这里，他们也使用工具提示来处理条形内部的文本调整.我不要这个.
var ctx = document.getElementById("myChart");var myChart = 新图表(ctx，{类型:'酒吧'，数据: {标签:[1 月 2 日"、1 月 9 日"、1 月 16 日"、1 月 23 日"、1 月 30 日"、2 月 6 日"、2 月 13 日"]、数据集:[{数据:[6, 87, 56, 15, 88, 60, 12],背景颜色:#4082c4"}]},选项: {悬停":{动画持续时间":0},动画片": {持续时间":1，onComplete":函数(){var chartInstance = this.chart,ctx = 图表实例.ctx;ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);ctx.textAlign = '中心';ctx.textBaseline = '底部';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);});});}},传奇: {显示":假},工具提示:{启用":假},尺度:{y轴:[{显示:假，网格线: {显示:假},刻度:{显示:假，零开始:真}}],x轴:[{网格线: {显示:假},刻度:{零开始:真}}]}}});我想要的是在所有情况下仅在顶部显示价值.
我从 myChart 内部定义的数据中取出数据，这样我就可以从数据集中取出最大值.然后在 yAxes 内部，您可以将最大刻度设置为数据集中的最大值 + 10.这可确保图表中的顶部条形不会超出画布边缘，也不会显示它们的值.
var ctx = document.getElementById("myChart");调试器；变量数据 = {标签:[1 月 2 日"、1 月 9 日"、1 月 16 日"、1 月 23 日"、1 月 30 日"、2 月 6 日"、2 月 13 日"]、数据集:[{数据:[150, 87, 56, 50, 88, 60, 45],背景颜色:#4082c4"}]}var myChart = 新图表(ctx，{类型:'酒吧'，数据:数据，选项: {悬停":{动画持续时间":0},动画片": {持续时间":1，onComplete":函数(){var chartInstance = this.chart,ctx = 图表实例.ctx;ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);ctx.textAlign = '中心';ctx.textBaseline = '底部';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);});});}},传奇: {显示":假},工具提示:{启用":假},尺度:{y轴:[{显示:假，网格线: {显示:假},刻度:{最大值:Math.max(...data.datasets[0].data) + 10,显示:假，beginAtZero: 真}}],x轴:[{网格线: {显示:假},刻度:{beginAtZero: 真}}]}}});<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>Please refer this Fiddle : 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
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.
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.
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>
这篇关于在 chart.js 中的条形顶部显示值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
