canvas学习笔记02：饼图&柱状图

时间 2019-11-13

标签 canvas 学习笔记饼图柱状繁體版

原文原文链接

<!DOCTYPE html> <html> <head> <meta charset="gbk"> </head> <body> <aside class="chart vert"> <canvas id="canPie" width="300" height="200" data-values='40, 30, 20, 60, 10, 50'> This browser does not support HTML5 Canvas. </canvas> <ol class="legend"> <li class="key one">One</li> <li class="key two">Two</li> <li class="key three">Three</li> <li class="key four">Four</li> <li class="key five">Five</li> <li class="key six">Six</li> </ol> </aside> <aside class="chart"> <canvas id="canBar" width="300" height="200" data-values='40, 30, 20, 60, 10, 50'> This browser does not support HTML5 Canvas. </canvas> <ol class="legend horiz"> <li class="key one">One</li> <li class="key two">Two</li> <li class="key three">Three</li> <li class="key four">Four</li> <li class="key five">Five</li> <li class="key six">Six</li> </ol> </aside> <style> body { font: normal normal 400 1rem/1.5 "Segoe UI", "Helvetica Neue", "DejaVu Sans", Helvetica, Arial, sans-serif; } aside { float: left; margin-right: 100px; } .chart { margin-bottom:0; margin-top:0; } .vert > canvas, .vert > ol { display:inline-block } .horiz > li { display: inline; padding-right: 20px; } .legend { vertical-align:top; padding-left:15px; list-style: none; } .key { position:relative; } .key:before { content:""; position:absolute; top:35%; left:-15px; width:10px; height:10px; } .one:before{background:rgb(236, 208, 120)} .two:before{background:rgba(217, 91, 67, 0.7)} .three:before{background:rgba(192, 41, 66, 0.7)} .four:before{background:rgba(84, 36, 55, 0.7)} .five:before{background:rgba(83, 119, 122, 0.7)} .six:before{background:rgba(119, 146, 174, 0.7)} </style> <script> /* Pie Chart Javascript =====================================================================*/ var pieColors = ['rgb(236, 208, 120)', 'rgba(217, 91, 67, 0.7)', 'rgba(192, 41, 66, 0.7)', 'rgba(84, 36, 55, 0.7)', 'rgba(83, 119, 122, 0.7)', 'rgba(119, 146, 174, 0.7)']; function getTotal( arr ){ var j, myTotal = 0; for( j = 0; j < arr.length; j++) { myTotal += ( typeof arr[j] === 'number' ) ? arr[j] : 0; } return myTotal; } function drawPieChart( canvasId ) { var i, canvas = document.getElementById( canvasId ), pieData = canvas.dataset.values.split(',').map( function(x){ return parseInt( x, 10 )}), halfWidth = canvas.width * .5, halfHeight = canvas.height * .5, ctx = canvas.getContext( '2d' ), lastend = 0, myTotal = getTotal(pieData); ctx.clearRect( 0, 0, canvas.width, canvas.height ); for( i = 0; i < pieData.length; i++) { ctx.fillStyle = pieColors[i]; ctx.beginPath(); ctx.moveTo( halfWidth, halfHeight ); ctx.arc( halfWidth, halfHeight, halfHeight, lastend, lastend + ( Math.PI * 2 * ( pieData[i] / myTotal )), false ); ctx.lineTo( halfWidth, halfHeight ); ctx.fill(); lastend += Math.PI * 2 * ( pieData[i] / myTotal ); } } drawPieChart('canPie'); /* Bar Chart Javascript =====================================================================*/ var barColors = ['rgb(236, 208, 120)', 'rgba(217, 91, 67, 0.7)', 'rgba(192, 41, 66, 0.7)', 'rgba(84, 36, 55, 0.7)', 'rgba(83, 119, 122, 0.7)', 'rgba(119, 146, 174, 0.7)']; function drawBarChart( canvasId ) { var i, start, top, canvas = document.getElementById( canvasId ), barData = canvas.dataset.values.split(',').map( function(x){ return parseInt( x, 10 )}), ctx = canvas.getContext( '2d' ), max = Math.max.apply( Math, barData ), padding = 20, plotWidth = canvas.width / barData.length - padding; ctx.clearRect(0, 0, canvas.width, canvas.height); for( i = 0; i < barData.length; i++) { start = i === 0 ? 0 : i * ( plotWidth + padding ); top = canvas.height - Math.round( canvas.height * ( barData[i] / max ) ); ctx.fillStyle = barColors[i]; ctx.fillRect( start, top, plotWidth, canvas.height - top); } } drawBarChart('canBar'); </script> </body> </html> html

canvas