canvas绘制经典折线图(一)
生活随笔
收集整理的這篇文章主要介紹了
canvas绘制经典折线图(一)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
最終效果圖如下：
實現(xiàn)步驟如下：注-引用了jQuery
HTML代碼
<!doctype html> <html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus?"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>canvas繪制折線圖</title><script src="scripts/jquery-1.11.3.js"></script><script src="scripts/recordPaint.js"></script><style></style></head><script>$(function(){/** 定義繪制折線圖的關鍵數(shù)據(jù)(12個月的消費記錄-金額)* 封裝函數(shù)專門用于繪制折線圖recordPaint(Elem,Data)方法* Elem - 表示<canvas>元素* Data - 表示關鍵數(shù)據(jù)*/var datas = [1200,2000,3000,500,200,800,1800,2200,2600,1000,600,300];recordPaint($("#recordCvs")[0],datas);});</script><body><div id="recordContent"><canvas id="recordCvs" width="600" height="400"></canvas></div></body> </html>JS代碼：即HTML中引用的外部JS文件<script src="scripts/recordPaint.js"></script>
/*** Created by walker on 2015/11/26.* 定義recordPaint()方法*/ function recordPaint(Elem,Data){// 1. 創(chuàng)建畫布對象var context = Elem.getContext('2d');// 2. 獲取畫布的寬度和高度const WIDTH = Elem.width;const HEIGHT = Elem.height;// 3. 定義坐標軸相對畫布的內(nèi)邊距var padding = 20;//初始化內(nèi)邊距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<max/500;i ){// 繪制金額context.fillText(money.jin "元",money.x,money.y);// y軸向下移動(增加)money.y = moneyY;// 金額每次減500money.jin -= 500;}/*繪制折線* 12個折點的x軸值，對應12個月文字的x軸值* 折點的y軸值等于原點的y軸值-折點到原點的距離* 折點到原點的距離 = (3000點的y到原點的y的長度)*當前金額/3000*/context.beginPath();for(var i=0;i<Data.length;i ){// 獲取折點的x和y值var pointY = origin.y - (origin.y - (axisY.y moneyY))*Data[i]/max;var pointX = pointsX[i];// 繪制折線if(i == 0){context.textAlign = "left";//context.textBaseline = "bottom";context.moveTo(pointX,pointY);}else{context.textAlign = "center";context.textBaseline = "bottom";context.lineTo(pointX,pointY);}// 繪制折點的金額context.fillText(Data[i],pointX,pointY);}context.stroke();// 繪制12個折點的圓for(var i=0;i<Data.length;i ){// 獲取折點的x和y值var pointY = origin.y - (origin.y - (axisY.y moneyY))*Data[i]/max;var pointX = pointsX[i];// 繪制圓context.fillStyle = "red";context.beginPath();context.arc(pointX,pointY,3,0,Math.PI*2);context.fill();}}總結(jié)：每個拐點的坐標值要清晰
更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com
總結(jié)
以上是生活随笔為你收集整理的canvas绘制经典折线图(一)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SVN版本控制系统学习(中文配置)
- 下一篇： 多个气泡向上冒出！