如何在ChartJs 的折线图中显示数据值或索引标签
2019-08-10 本文已影响0人
rainy66
如何在Chartjs的折线图中显示数据值或索引值，如图所示：
图例.PNG
简介
Chart.js是一款不依赖任何外部js库的图标插件，具体的使用方法可查看Chart.js官网。
需求
Chart.js并没有直接提供显示具体数据的功能，需要鼠标移上去才会显示数值，但是现在做项目需求时，需要在折线图上的区域上数据显示在点上，如上图所示
代码实现：
该代码可自动填充颜色。为了防止鼠标悬停时闪烁，需要添加以下代码：
hover: { animationDuration: 0 // 防止鼠标移上去，数字闪烁 },
完整的代码
<!DOCTYPE html>
<html>
<head>
<title>chartjs示例</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
</head>
<body>
<div>
<div style="width: 400px;height: 400px">
<canvas id="myChart" width="400" height="400"></canvas>
</div>
</div>
</body>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 20, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
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>
