原生js实现折线图图表效果代码
代码语言:html
所属分类:图表
代码描述:原生js实现折线图图表效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; overflow: hidden; background: #152B39; font-family: Courier, monospace; font-size: 14px; color:#ccc; } .wrapper { display: block; margin: 5em auto; border: 1px solid #555; width: 700px; height: 350px; position: relative; } p{text-align:center;} .label { height: 1em; padding: .3em; background: rgba(255, 255, 255, .8); position: absolute; display: none; color:#333; } </style> </head> <body> <!-- partial:index.partial.html --> <div class="wrapper"> <canvas id='c'></canvas> <div class="label">text</div> </div> <p>Please mouse over the dots</p> <!-- partial --> <script > var label = document.querySelector(".label"); var c = document.getElementById("c"); var ctx = c.getContext("2d"); var cw = c.width = 700; var ch = c.height = 350; var cx = cw / 2, cy = ch / 2; var rad = Math.PI / 180; var frames = 0; ctx.lineWidth = 1; ctx.strokeStyle = "#999"; ctx.fillStyle = "#ccc"; ctx.font = "14px monospace"; var grd = ctx.createLinearGradient(0, 0, 0, cy); grd.addColorStop(0, "hsla(167,72%,60%,1)"); grd.addColorStop(1, "hsla(167,72%,60%,0)"); var oData = { "2008": 10, "2009": 39.9, "2010": 17, "2011": 30.0, "2012": 5.3, "2013": 38.4, "2014": 15.7, "2015": 9.0 }; var valuesRy = []; var propsRy = []; for (var prop in oData) { valuesRy.push(oData[prop]); propsRy.push(prop); } var vData = 4; var hData = valuesRy.length; var offset = 50.5; //offset chart axis var chartHeight = ch - 2 * offset; var chartWidth = cw - 2 * offset; var t = 1 / 7; // curvature : 0 = no curvature var speed = 2; // for the animation var A = { x: offset, y: offset } var B = { x: offset, y: offset + chartHeight } var C = { x: offset + chartWidth, y: offset + chartHeight } /* A ^ | | + 25 | | | + 25 |__|_________________________________ C B */ // CHART AXIS ------------------------- ctx.beginPath(); ctx.moveTo(A.x, A.y); ctx.lineTo(B.x, B.y); ctx.lineTo(C.x, C.y); ctx.stroke(); // vertical ( A - B ) var aStep = (chartHeight - 50) / (vData); var Max = Math.ceil(arrayMax(valuesRy) / 10) * 10; var Min = Math.floor(arrayMin(valuesRy) / 10) * 10; var aStepValue = (Max - Min) / (vData); console.log("aStepValue: " + aStepValue); //8 units var verticalUnit = aStep / aStepValue; var a = []; ctx.textAlign = "right"; ctx.textBaseline = "middle"; for (var i = 0; i <= vData; i++) { if (i == 0) { a[i] = { x: A.x, y: A.y + 25, val: Max } } else { a[i] = {} a[i].x = a[i - 1].x; a[i].y = a[i - 1].y + aStep; a[i].val = a[i - 1].val - aStepValue; } drawCoords(a[i], 3, 0); } //horizontal ( B - C ) var b = []; ctx.textAlign = "center"; ctx.textBaseline = "hanging"; var bStep = chartWidth / (hData + 1); for (var i = 0; i < hData; i++) { if (i == 0) { b[i] = { x: B.x + bStep, y: B.y, val: propsRy[0] }; } else { b[i] = {} b[i].x = b[i - 1].x + bStep; b[i].y = b[i - 1].y; b[i].val = propsRy[i] } drawCoords(b[i], 0, 3) } function drawCoords(o, offX, offY) { ctx.beginPath(); ctx.moveTo(o.x - offX, o.y - offY); ctx.lineTo(o.x + offX, o.y + offY); ctx.stroke(); ctx.fillText(o.val, o.x - 2 * offX, o.y + 2 * offY); } //------------------------------------------.........完整代码请登录后点击上方下载按钮下载查看
网友评论0