用Chart.js画渐变色的曲线图，及展示某个点的坐标，踩坑实战

最新推荐文章于 2025-11-14 05:57:21 发布

原创

最新推荐文章于 2025-11-14 05:57:21 发布 · 5.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#chart.js #数据可视化 #背景渐变 #canvas #H5

本文介绍如何使用Chart.js库在HTML5 Canvas上绘制带有背景渐变色的曲线图，并实现在图上显示特定点的数据。通过示例代码展示了绘制过程，同时分享了解决鼠标交互时数据点消失的调试方法，即在动画完成时调整canvas和iframe的pointer-events属性。

需求是这样：有一系列数据，是写死在JS中的，利用这些数据点绘制折线图。然后会调用接口拿到一个点的数据（只有横坐标），要在折线图上把这个点表示出来，并显示点数据（tooltip）。

先看看本宝宝用chart.js画的效果图：

chart.min.js绘制折线图

怎么样，还是蛮漂亮的吧？几乎原原本本地达到了UI师的设计稿。

废话不说，先上代码。

这是HTML:

<canvas id='mychart' width='300' height='200'></canvas>

这是javascript，包括里面的原始数据：

function  drawImg(useryear){
   
   

    function range(s,e){
   
   
    var res =[]

    while(s!==e){
        res.push(s)
        s < e ? s++ : s--;
        }
    res.push(e) // or  res.push(s)
    return res
    }

var yearRange = range(0,105)


var sick  = '0.000705   0.0005905   0.000501    0.000434    0.000385    0.000355    0.0003315   0.000315    0.00031 0.00031 0.000316    0.0003245   0.000335    0.000346    0.0003575   0.000371    0.000386    0.0004025   0.000422    0.000444    0.0004685   0.0004965   0.0005285   0.0005665   0.0006105   0.0006605   0.000715    0.000773    0.0008345   0.000899    0.000968    0.0010435   0.00113 0.001232    0.001353    0.001496    0.00166 0.001847    0.002058    0.002294    0.0025585   0.0028545   0.0031835   0.003549    0.003952    0.004394    0.0048735   0.005375    0.005895    0.0064355   0.007002    0.007601    0.008242    0.008931    0.009672    0.0104615   0.0112935   0.0121585   0.013052    0.013975    0.0149355   0.0159485   0.017035    0.018

最低0.47元/天解锁文章