如何在Chart.js上显示数据值
如何在Chart.js上显示数据值
提问于 2015-07-26 05:33:36
我想问一下，是否可以使用Chart.js来显示数据值？我想把图表打印出来。
谢谢你的建议。
回答 9
Stack Overflow用户
发布于 2016-07-22 05:17:37
此动画选项适用于条形图上的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);
}
});
}}Stack Overflow用户
发布于 2018-05-17 18:55:03
如果您使用的是插件chartjs-plugin-datalabels，则以下代码选项对象将有所帮助
确保在typescript文件中导入import 'chartjs-plugin-datalabels';，或者在javascript文件中添加对<script src="chartjs-plugin-datalabels.js"></script>的引用。
options: {
maintainAspectRatio: false,
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
}
}]
},
plugins: {
datalabels: {
anchor: 'end',
align: 'top',
formatter: Math.round,
font: {
weight: 'bold'
}
}
}
}Stack Overflow用户
发布于 2016-08-06 05:01:09
基于@Ross对Chart.js 2.0和更高版本的回答，我不得不包括一些小调整，以防止当酒吧的高度太高时选择比例边界的情况。
条形图选项的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);
}
});
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31631354
复制相关文章
相似问题