如何在 Chart.js 上显示数据值

有没有可能使用 Chart.js来显示数据值？

我想打印图表。

谢谢你的建议。

368790 次浏览
小开
最佳答案

Chart.js 2.7.0 + 有一个官方插件来完成这项工作: 一个 href = “ https://github.com/chartjs/chartjs-plugin-Datalabels”rel = “ noReferrer”> Datalabels

否则，可以循环遍历 onAnimationComplete 上的点/条并显示值

预览

Enter image description here

超文本标示语言

<canvas id="myChart1" height="300" width="500"></canvas>
<canvas id="myChart2" height="300" width="500"></canvas>

剧本

var chartData = {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [
{
fillColor: "#79D1CF",
strokeColor: "#79D1CF",
data: [60, 80, 81, 56, 55, 40]
}
]
};


var ctx = document.getElementById("myChart1").getContext("2d");
var myLine = new Chart(ctx).Line(chartData, {
showTooltips: false,
onAnimationComplete: function () {


var ctx = this.chart.ctx;
ctx.font = this.scale.font;
ctx.fillStyle = this.scale.textColor
ctx.textAlign = "center";
ctx.textBaseline = "bottom";


this.datasets.forEach(function (dataset) {
dataset.points.forEach(function (points) {
ctx.fillText(points.value, points.x, points.y - 10);
});
})
}
});


var ctx = document.getElementById("myChart2").getContext("2d");
var myBar = new Chart(ctx).Bar(chartData, {
showTooltips: false,
onAnimationComplete: function () {


var ctx = this.chart.ctx;
ctx.font = this.scale.font;
ctx.fillStyle = this.scale.textColor
ctx.textAlign = "center";
ctx.textBaseline = "bottom";


this.datasets.forEach(function (dataset) {
dataset.bars.forEach(function (bar) {
ctx.fillText(bar.value, bar.x, bar.y - 5);
});
})
}
});

小提琴 http://jsfiddle.net/uh9vw0ao/

小开

按照这个 答得好，我将使用这些选项作为条形图:

var chartOptions = {
animation: false,
responsive : true,
tooltipTemplate: "<%= value %>",
tooltipFillColor: "rgba(0,0,0,0)",
tooltipFontColor: "#444",
tooltipEvents: [],
tooltipCaretSize: 0,
onAnimationComplete: function()
{
this.showTooltip(this.datasets[0].bars, true);
}
};


window.myBar = new Chart(ctx1).Bar(chartData, chartOptions);

Bar Chart

这仍然使用工具提示系统和他的优势(自动定位，模板，...) ，但是隐藏了装饰(背景颜色，插入符号，...)

小开

这适用于 Chart.js 2.3，包括行/栏类型。

重要提示: 即使你不需要动画，也不要把持续时间选项改为0。否则，您将得到 Controller 是未定义的错误。

var chartData = {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [
{
fillColor: "#79D1CF",
strokeColor: "#79D1CF",
data: [60, 80, 81, 56, 55, 40]
}
]
};


var opt = {
events: false,
tooltips: {
enabled: false
},
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);
});
});
}
}
};
var ctx = document.getElementById("Chart1"),
myLineChart = new Chart(ctx, {
type: 'bar',
data: chartData,
options: opt
});
<canvas id="myChart1" height="300" width="500"></canvas>

小开

此动画选项适用于2.1.3条形图。

略作修改的 罗斯回答:

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);
}
});
}
}
小开

我认为在 Chart.js v2.x 中最好的选择是使用一个插件，这样就不会在选项中包含大量代码。此外，它还可以防止数据在鼠标悬停在一个条形图上时消失。

例如，简单地使用这个代码，它注册一个插件，在绘制图表之后添加文本。

Chart.pluginService.register({
afterDraw: function(chartInstance) {
var ctx = chartInstance.chart.ctx;


// 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';


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;
ctx.fillText(dataset.data[i], model.x, model.y - 2);
}
});
}
});
小开

基于 Chart.js 2.0及以上版本的 罗斯的回答，我不得不进行一些小的调整，以防止当酒吧的高度过于选择比例边界时出现问题。

Example

柱状图选项的 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);
}
});
}
}
小开

我稍微编辑了一下 Aaron Hudon 的回答，但是编辑了 只是为了柱状图。我的版本补充道:

  • 值在动画中淡出。
  • 如果条形图太高，可以通过定位条形图内的值来防止剪切。
  • 别眨眼。

Example

缺点: 当鼠标悬停在一个有值的条上时，这个值可能看起来有点参差不齐。我还没有找到一个解决方案做禁用悬停效果。它可能还需要根据您自己的设置进行调整。

配置:

bar: {
tooltips: {
enabled: false
},
hover: {
animationDuration: 0
},
animation: {
onComplete: function() {
this.chart.controller.draw();
drawValue(this, 1);
},
onProgress: function(state) {
var animation = state.animationObject;
drawValue(this, animation.currentStep / animation.numSteps);
}
}
}

帮手:

// Font color for values inside the bar
var insideFontColor = '255,255,255';
// Font color for values above the bar
var outsideFontColor = '0,0,0';
// How close to the top edge bar can be before the value is put inside it
var topThreshold = 20;


var modifyCtx = function(ctx) {
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
return ctx;
};


var fadeIn = function(ctx, obj, x, y, black, step) {
var ctx = modifyCtx(ctx);
var alpha = 0;
ctx.fillStyle = black ? 'rgba(' + outsideFontColor + ',' + step + ')' : 'rgba(' + insideFontColor + ',' + step + ')';
ctx.fillText(obj, x, y);
};


var drawValue = function(context, step) {
var ctx = context.chart.ctx;


context.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 textY = (model.y > topThreshold) ? model.y - 3 : model.y + 20;
fadeIn(ctx, dataset.data[i], model.x, textY, model.y > topThreshold, step);
}
});
};
小开

来自 Chart.js 示例(文件 Chart.js-2.4.0/sample/data _ label. html) :

        // Define a plugin to provide data labels


Chart.plugins.register({
afterDatasetsDraw: function(chartInstance, easing) {
// To only draw at the end of animation, check for easing === 1
var ctx = chartInstance.chart.ctx;


chartInstance.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.getDatasetMeta(i);
if (!meta.hidden) {
meta.data.forEach(function(element, index) {
// Draw the text in black, with the specified font
ctx.fillStyle = 'rgb(0, 0, 0)';


var fontSize = 16;
var fontStyle = 'normal';
var fontFamily = 'Helvetica Neue';
ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);


// Just naively convert to string for now
var dataString = dataset.data[index].toString();


// Make sure alignment settings are correct
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';


var padding = 5;
var position = element.tooltipPosition();
ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
});
}
});
}
});
小开

我建议使用这个插件: 一个 href = “ https://github.com/chartjs/chartjs-plugin-datalabels”rel = “ nofollow noReferrer”> datalabels

只需将插件导入到 JavaScript 文件中，就可以将标签添加到图表中，例如:

import 'chartjs-plugin-datalabels'

并且可以使用以下文档进行微调: 翻译: 奇芳校对: 奇芳校对: 奇芳校对: 奇芳校对: 奇芳校对: 奇芳校对: 奇芳校对: 奇芳校对: 奇芳校对: 奇芳校对: 奇芳校对: 奇芳校对: 奇芳 https://chartjs-plugin-datalabels.netlify.com/options.html 校对: 奇芳校对: 奇芳校对: 奇芳校对: 奇芳校对: 奇芳校对: 奇芳校对: 奇芳校对: 奇芳校对: 奇

小开

根据我的经验，一旦包含了 Chartjs-plugin-datalabels插件(确保在页面上的 chart.js 标签后面放置 <script>标签) ，图表就会开始显示值。

如果您然后选择，您可以定制它，以满足您的需要。但基本上，格式就像这个假设的例子:

var myBarChart = new Chart(ctx, {
type: 'bar',
data: yourDataObject,
options: {
// other options
plugins: {
datalabels: {
anchor :'end',
align :'top',
// and if you need to format how the value is displayed...
formatter: function(value, context) {
return GetValueFormatted(value);
}
}
}
}
});
小开

如果您使用的是插件 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'
}
}
}
}
小开

为了防止你的数字太靠近画布顶部而被剪掉:

yAxes: [{
ticks: {
stepSize: Math.round((1.05*(Math.max.apply(Math, myListOfyValues)) / 10)/5)*5,
suggestedMax: 1.05*(Math.max.apply(Math, myListOfyValues)),
beginAtZero: true,
precision: 0
}
}]

  • 10 = 刻度数

  • 5 = 圆周刻度值到最接近的5-所有的 y 值都会均匀地增加

  • 1.05 = 增加 y 轴的最大刻度值，这样数字就不会被截断

类似的东西也适用于 XAxes。

小开

将@Ross 的答案改编为使用3.7.0版本的 Chartjs

animation: {
duration: 0,
onComplete: function() {
ctx = this.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.font.size, Chart.defaults.font.style, Chart.defaults.font.family);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
chartinst = this;
this.data.datasets.forEach(function(dataset, i) {
if(chartinst.isDatasetVisible(i)){
var meta = chartinst.getDatasetMeta(i);
meta.data.forEach(function(bar, index) {
var data = dataset.data[index];
ctx.fillText(data, bar.x, bar.y - 5);
});
}
});
}
}

在这种情况下，动画可以为0 如果您想要一个更“静态”的可视化，您可以禁用悬停和工具提示

此外，isDataSetVisible 可以去除在多个数据集情况下隐藏数据集时显示的数字


提交答案