简介
Chart.js是一款不依赖任何外部js库的图表插件，具体的使用方法可查看Chart.js官网。
需求
Chart.js并没有直接提供显示具体数值的功能，需要鼠标移上去，才会显示数值，现在，我们需要显示具体的数值。
效果
在每一条柱状上显示具体数值。
代码实现：
该代码可自动填充颜色。为了防止鼠标悬停时闪烁，需要添加以下代码：
// 将hover动画设置为0，防止鼠标悬停产生闪烁
hover: {animationDuration: 0}完整代码：
<!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>
</body>
<script>
// 功能 返回随机的颜色值
// @param opacity 透明度
// @return rgba格式颜色值
var dynamicColors = function (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格式颜色数组
// @param length 数组的长度
// @param opacity 颜色的透明度
// return 返回rgba数组
var getColorArr = function (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 = {
// x轴显示的label
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;
// 以下属于canvas的属性（font、fillStyle、textAlign...）
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>
</html>