最终效果图如下：
实现步骤如下：注-引用了jQuery
HTML代码
canvas绘制折线图
JS代码：即HTML中引用的外部JS文件<script src="scripts/recordPaint.js"></script>
/** * Created by walker on 2015/11/26. * 定义recordPaint()方法 */function recordPaint(Elem,Data){ // 1. 创建画布对象 var context = Elem.getContext('2d'); // 2. 获取画布的宽度和高度 const WIDTH = Elem.width; const HEIGHT = Elem.height; // 3. 定义坐标轴相对画布的内边距 var padding = 20;//初始化内边距 var paddingLeft = 60;//至少大于绘制文字的宽度 var paddingBottom = 30;//至少大于绘制文字的高度 // 4. 定义绘制坐标轴的关键点的坐标值 var axisY = {// y轴的起点坐标值 x : paddingLeft, y : padding }; var origin = {// 原点坐标值(x轴与y轴相交点) x : paddingLeft, y : HEIGHT - paddingBottom }; var axisX = { x : WIDTH - padding, y : HEIGHT - paddingBottom }; // 5. 绘制坐标轴 context.beginPath(); context.moveTo(axisY.x,axisY.y); context.lineTo(origin.x,origin.y); context.lineTo(axisX.x,axisX.y); context.stroke(); // 6. 绘制坐标轴的箭头 context.beginPath(); context.moveTo(axisY.x-5,axisY.y+10); context.lineTo(axisY.x,axisY.y); context.lineTo(axisY.x+5,axisY.y+10); context.stroke(); context.beginPath(); context.moveTo(axisX.x-10,axisX.y-5); context.lineTo(axisX.x,axisX.y); context.lineTo(axisX.x-10,axisX.y+5); context.stroke(); // 定义折点的x轴值 var pointsX = []; // 7. 绘制坐标轴的刻度(x轴的月份和y轴的金额) // x轴的月份 var month = { x : paddingLeft, y : HEIGHT - paddingBottom } // 设置字体 context.font = "14px 微软雅黑"; // 设置垂直对齐 context.textBaseline = "top"; for(var i=1;i<=12;i++){ pointsX[pointsX.length] = month.x; // 绘制月份信息 context.fillText(i+"月",month.x,month.y); // 改变每次绘制的x坐标轴的值 month.x += (axisX.x - origin.x)/12; } // 绘制y轴的金额 // 从众多的关键金额中,取到最高金额 /* var datas = []; for(index in Data){ datas[datas.length] = Data[index]; } function sortNumber(a,b){ return a - b; } var max = datas.sort(sortNumber)[datas.length-1]; */ var max = Math.max.apply(Math,Data); var moneyY = (origin.y - axisY.y)/(max/500+1); // 定义绘制的坐标值 var money = { x : axisY.x - 5, y : axisY.y + moneyY, jin : max } // 设置水品对齐 context.textAlign = "right"; // 遍历"最高值/间隔"次 for(var i=0;i 总结：每个拐点的坐标值要清晰