Chart.js显示数值详细指南
简介
Chart.js是一款不依赖任何外部js库的图表插件，具体的使用方法可查看[Chart.js官网](https://www.chartjs.org/)，默认情况下，Chart.js并没有直接提供显示具体数值的功能，需要鼠标移上去才会显示数值，本文将详细介绍如何在Chart.js中实现数值的显示，并附带相关代码和示例。
效果展示
在每一条柱状上显示具体数值。
代码实现
以下是一个完整的HTML和JavaScript代码示例，演示如何在柱状图上显示数值：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chart示例</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
</head>
<body>
<canvas id="barChart"></canvas>
<script>
// 功能 返回随机的颜色值
function dynamicColors(opacity) {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
var a = opacity;
return "rgba(" + r + "," + g + "," + b + "," + a + ")";
}
// 功能 返回rgba格式颜色数组
function getColorArr(length, opacity) {
var colorArr = new Array();
for (var i = 0; i < length; i++) {
colorArr.push(dynamicColors(opacity));
}
return colorArr;
}
// 准备数据
var labels = ['一月','二月','三月','四月','五月','六月','七月'];
var data = [12, 10, 5, 2, 20, 30, 45];
var chartData = {
labels: labels,
datasets: [{
data: data, // 数据
label: '业务考核得分', // 图例
backgroundColor: getColorArr(labels.length, 0.5),
borderWidth: 1
}]
};
// 绘制图表
var ctx = document.getElementById('barChart').getContext('2d');
var bar = new Chart(ctx, {
type: 'bar',
data: chartData,
options: {
hover: {
animationDuration: 0 // 防止鼠标移上去，数字闪烁
},
animation: {
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.fillStyle = "black";
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);
});
});
}
}
}
});
</script>
</body>
</html>相关问题与解答
问题1：如何在折线图中显示数据值或索引值？
答：要在折线图上显示数据值或索引值，可以在options配置中添加tooltips和hover属性，如下所示：
options: {
tooltips: {
enabled: true,
mode: 'index' // or 'dataset'
},
hover: {
animationDuration: 0, // 防止鼠标移上去，数字闪烁
},
animation: {
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.fillStyle = "black";
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);
});
});
}
}
}这样，当鼠标悬停在折线图上的点时，会显示对应的数据值或索引值。
问题2：如何覆盖Chart.js中的刻度算法，并在y轴上只显示两个标签（值的最大值和最小值）？
答：要覆盖Chart.js中的刻度算法，并在y轴上只显示最大值和最小值，可以使用回调函数来自定义刻度标签，以下是一个示例代码：
options: {
scales: {
yAxes: [{
ticks: {
callback: function(value, index, values) {
if (index === values.length 1) return Math.min.apply(this, values);
else if (index === 0) return Math.max.apply(this, values);
else return '';
}
}
}]
}
}这个回调函数会在y轴刻度生成时调用，根据条件返回最大值、最小值或空字符串，从而实现只显示最大值和最小值的效果。
到此，以上就是小编对于“chartjs显示数值”的问题就介绍到这了，希望介绍的几点解答对大家有用，有任何问题和不懂的，欢迎各位朋友在评论区讨论，给我留言。
文章来源网络，作者：运维，如若转载，请注明出处：https://shuyeidc.com/wp/43303.html<
