canvas实现折线图

效果图如下：

一.思路

折线的实现可以分为两种情况：
1.少于七个点
对于少于7个点的情况，主要是描点，画线，标注三部分
2.大于等于七个点
对于大于等于七个点的情况，主要是画线，标注极点

二.实现要点

最重要的是每个点位置的确定

<1>对数据进行处理
首先对数据进行处理
A.将空数组填充一定的内容

var noData= chartEntity.originArr.length==0?true:false;
//小于7的时候是7天数据，补全后面数据
var originArr2=[];
if(noData){
    originArr2=[50,50,50,50,50,50,50];
}else{
    originArr2=chartEntity.originArr.concat();
}

B.将少于7个点的数据补充为7个点，补充值为原数组最后一个数据

//补充数据
while(originArr2.length < 7){
    originArr2.push(chartEntity.originArr[chartEntity.originArr.length-1]);
}

<2>极点的确定
因为是以最低点，最高点定边界，所以首先要先确定极点的值以及极点之间的差值

var canScale=window.devicePixelRatio;
//获得数组最大值
var maxWeight= chartEntity.originArr.length == 0 ? originArr2[0]:Math.max.apply(null, chartEntity.originArr);
//获得数组最大值的下标
var maxWeightIndex=chartEntity.originArr.lastIndexOf(maxWeight);
//获得数组最小值
var minWeight= chartEntity.originArr.length == 0 ? originArr2[0]:Math.min.apply(null, chartEntity.originArr);
//获得数组最小值的下标
var minWeightIndex=chartEntity.originArr.lastIndexOf(minWeight);
//获得最大值最小值差值
var weightDef= maxWeight-minWeight;

<3>各个点位置的确定

//最大值最小值一样
if(weightDef == 0){
    weightDef = 1;
    dateIsSame=true;
}

//初始坐标数据处理
for(var i=0;i<originArr2.length;i++){
    hPercentArr[i] = (maxWeight-originArr2[i])/weightDef*chartEntity.waveHeight*canScale+minHeight;
    wPercentArr[i] = dateArr[i]*($("#"+chartEntity.chartID).width()-15)*canScale+15;
    console.info(hPercentArr[i]+"||"+wPercentArr[i]);
}
var diffWidth=(wPercentArr[1]-wPercentArr[0])/canScale;

<4>初始化画布

//画布初始化
var canvas=document.getElementById(chartEntity.chartID);
var context=canvas.getContext("2d");
canvas.width=$("#"+chartEntity.chartID).width()*canScale;
canvas.height=$("#"+chartEntity.chartID).height()*canScale;

<5>描线，标注

//画线
for(var i=0;i<originArr2.length;i++){
   
    if(dateIsSame){
        $("#"+chartEntity.chartID).css("marginTop","1.75rem");
    }
    context.lineTo(wPercentArr[i],hPercentArr[i]);
    if(i < chartEntity.originArr.length){
        if(dateIsSame){
            $("#"+chartEntity.chartNumID).append("<div class='weightNum-item' style='position:absolute;top:"+(hPercentArr[i]/canScale-fontSize+0.75*fontSize)+"px;left:"+(wPercentArr[i]/canScale-13)+"px;'>"+chartEntity.originArr[i]+"</div>");
        }else{
            $("#"+chartEntity.chartNumID).append("<div class='weightNum-item' style='position:absolute;top:"+(hPercentArr[i]/canScale-1.5*fontSize+0.75*fontSize)+"px;left:"+(wPercentArr[i]/canScale-16)+"px;'>"+chartEntity.originArr[i]+"</div>");
        }
    }
}
if(chartEntity