chart.js ajax 折线图,如何在ChartJs 的折线图中显示数据值或索引标签

如何在Chartjs的折线图中显示数据值或索引值，如图所示：

图例.PNG

简介

Chart.js是一款不依赖任何外部js库的图标插件，具体的使用方法可查看Chart.js官网。

需求

Chart.js并没有直接提供显示具体数据的功能，需要鼠标移上去才会显示数值，但是现在做项目需求时，需要在折线图上的区域上数据显示在点上，如上图所示

代码实现：

该代码可自动填充颜色。为了防止鼠标悬停时闪烁，需要添加以下代码：

hover: { animationDuration: 0 // 防止鼠标移上去，数字闪烁 },

完整的代码

chartjs示例

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);

});

});

}

}

}

});