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

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

先看看本宝宝用chart.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