如何在ChartJs 的折线图中显示数据值或索引标签

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


图例.PNG

简介

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

需求

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

代码实现:

该代码可自动填充颜色。为了防止鼠标悬停时闪烁,需要添加以下代码:
hover: { animationDuration: 0 // 防止鼠标移上去,数字闪烁 },

完整的代码




  chartjs示例
 


  

你可能感兴趣的:(如何在ChartJs 的折线图中显示数据值或索引标签)