我们到底能走多远系列（34）
扯淡：
送给各位一段话：
人生是一个不断做加法的过程
从赤条条无牵无挂的来
到学会荣辱羞耻 礼仪规范
再到赚取世间的名声 财富 地位
但是人生还要学会做减法
财富名声这些身外之物有一天会失去
朋友 亲人终有一天会离你而去
我们自己会衰老 迟钝
最后赤条条的离开这个世界
我们都不太擅长做人生的减法
很难学会放下
放不下面子 所以要打肿脸充胖子
放不下逝去的情感 就会沉溺其中 痛苦不堪
放不下输赢 所以总是如履薄冰 心惊胆战
佛说 我执 是痛苦的根源
人生要学会 断 舍 离
断绝不需要的东西
舍弃多余的废物
脱离对物品的执念
所以想幸福 请先放下
主题：
最近想用html5来话图表，就接触了下，发现html5 是一个总称而已，进去后里面分成各种标签比如：HTML5 Video，HTML5 Audio，HTML5 Canvas等等，各不相关，所以学习起来也不复杂，比如我想画图表就先学习下 Canvas就好了。
所以，我感觉这东西也就是调下api，没什么太大的难度，难得地方是要实现一个东西还需要学习css，javascript这些东西才行。
自己画的线图: 用一个function包起来，是为了简单的封装一下内部的变量。
需要注意的是代码依赖jquery。
这是一个比较初步的实现，对于canvas上画图，其实直接理解成现实中那笔在话就可以了，像下面的线图，先画好x y 轴，然后再话线，再来画事件现实文字。画面变化的产生目前我发现的是用clearRect方法先清空画面，然后重画....
function lineChart(data){ var xPadding = 60;//x轴离边框的距离 var yPadding = 50;//y轴离边框的距离 var canvasWidth; var canvasHeight; var xAxisLength; //x轴长度 var yAxisLength; //y轴长度 var xTextColour = "#000000"; // x轴字体颜色 var yTextColour = "#000000"; // y轴字体颜色 var dotsColour = "#183487"; // 图标点的颜色 var lineWidth = 2 //线宽度 var lineColour = "#194E9C"; // 线颜色 var lineShadowColour = "rgba( 0, 0, 0, .5 )"; // 线阴影颜色 var lineShadowBlur = 15; var lineShadowOffsetX = 3; var lineShadowOffsetY = 3; var xyColour = "#4B0082"; //xy轴颜色 var xToTextlength = 20; //x轴和文字的间距 var yToTextlength = 10; //y轴和文字的间距 var yTextNum = 6; //y轴和文字数量 var chartLineFont = "bold 16px 'Trebuchet MS', Verdana, sans-serif";// xy轴字体 var chooseDotTextFont = "bold 16px 'Trebuchet MS', Verdana, sans-serif";//显示提示字体 var dotsToDotsXLength; //x轴间距 var dotsXArray = []; var divideXArray = []; //分割每个点的竖切线的x坐标 var lineChart; // The canvas element in the page init(data); function init(data){ lineChart = document.getElementById('lineChart'); // Initialise some properties of the canvas and chart canvasWidth = lineChart.width; canvasHeight = lineChart.height; xAxisLength = canvasWidth - 2*xPadding; yAxisLength = canvasHeight - 2*yPadding; dotsToDotsXLength = xAxisLength / data.length; drawLineChart(); // 添加事件 $('#lineChart').mousemove(handleDotsMousemoveEvent); } function drawLineChart(index){ var c = lineChart.getContext('2d'); // Clear the canvas, ready for the new frame c.clearRect ( 0, 0, canvasWidth, canvasHeight ); c.lineWidth = lineWidth; c.strokeStyle = xyColour; // Draw the axises c.beginPath(); c.moveTo(xPadding, yPadding); // y轴 c.lineTo(xPadding, lineChart.height - yPadding); // x轴 c.lineTo(lineChart.width - yPadding, lineChart.height - yPadding); c.stroke(); // Draw the the background line c.beginPath(); c.strokeStyle = '#D9D6D6'; for(var i = 0; i <= getMaxYPoint(getMaxY()); i += getYSpace()) { if(i != 0){ c.moveTo(xPadding + 2, getYPixel(i)); c.lineTo(xPadding + xAxisLength + 2, getYPixel(i)); } } c.stroke(); // Draw the X value texts c.font = chartLineFont; c.fillStyle = xTextColour; c.textAlign = "center"; var step = parseInt(data.length/yTextNum); for(var i = 0; i < data.length; i =i + step) { c.fillText(data[i].X, getXPixel(i), lineChart.height - yPadding + xToTextlength); } // Draw the Y value texts c.textAlign = "right"; c.textBaseline = "middle"; c.fillStyle = yTextColour; for(var i = 0; i <= getMaxYPoint(getMaxY()); i += getYSpace()) { c.fillText(formatNum(i), xPadding - yToTextlength, getYPixel(i)); } // Draw the line graph drawLineAndDots(c, index); } /** * 画线 * @param c * @param index */ function drawLineAndDots(c, index){ c.beginPath(); c.strokeStyle = lineColour; c.moveTo(getXPixel(0), getYPixel(data[0].value)); for(var i = 1; i < data.length; i ++) { // 使用直线 //c.lineTo(getXPixel(i), getYPixel(data[i].value)); //var cps = getControlPoints(getXPixel(i-1),getYPixel(data[i-1].value),getXPixel(i),getYPixel(data[i].value)); //为了更美观一点 使用了弯曲的线 c.bezierCurveTo(getXPixel(i-1)+9,getYPixel(data[i-1].value)+9,getXPixel(i)-9,getYPixel(data[i].value)-9,getXPixel(i), getYPixel(data[i].value)) /** // 线的阴影部分 c.shadowBlur = lineShadowBlur; c.shadowOffsetX = lineShadowOffsetX; c.shadowOffsetY = lineShadowOffsetY; c.shadowColor = lineShadowColour; **/ } c.stroke(); c.shadowColor = "rgba( 0, 0, 0, 0 )"; c.closePath(); // Draw the dots c.fillStyle = dotsColour; for(var i = 0; i < data.length; i ++) { // 有点中的节点 if(i == index){ c.beginPath(); c.arc(getXPixel(i), getYPixel(data[i].value), 8, 0, Math.PI * 2, true); c.fill(); c.textAlign = "center"; c.font = chooseDotTextFont; c.fillText(data[i].X, xAxisLength + xPadding + 5 , 20 ) c.fillText(data[i].value, xAxisLength + xPadding + 5 , 40 ) }else{ c.beginPath(); c.arc(getXPixel(i), getYPixel(data[i].value), 4, 0, Math.PI * 2, true); c.fill(); } divideXArray[i] = getXPixel(i) + dotsToDotsXLength/2; } } function getMaxY() { var max = 0; for(var i = 0; i < data.length; i ++) { if(data[i].value > max) { max = data[i].value; } } max += 10 - max % 10; return max; } /** * 计算x轴间距 * @param val * @returns {number} */ function getXPixel(val) { return (dotsToDotsXLength) * val + (xPadding * 1.5); } /** * 计算y轴间距 * @param val * @returns {number} */ function getYPixel(val) { return lineChart.height - ((yAxisLength / getMaxYPoint(getMaxY())) * val) - yPadding; } /** * 计算Y轴显示最大值 * 输入1234 输出2000 * @param maxY */ function getMaxYPoint(maxY){ var firstDigit = parseInt((maxY + '').substring(0,1)) + 1; var digitNum = parseInt((maxY+"").length); for(var i = 1; i 效果：
饼图：
这个代码是来自于网上：
里面有详细的解释。
注意以上网站上的源码无法直接使用所以 本人进行了部分的修改，以实现能够动态的处理后台传输的数据，并增加一个栏目，使功能完整。可以直接作为插件放入项目。
修改后的代码：（直接保存html文件即可）
Pie Chart with HTML5 and jQuery - 1.0
Widget Sales ($) prcent (%)
总结：
1,我们完全可以只利用API画出自己想要的东西：
2，关于html5图表的插件有很多比如：
3，阅读网站：http://diveintohtml5.info/
4，不管html5以后发不发展，学点然后做个比较复杂的动画玩玩，也不错
补充：
鉴于项目压力，为了竟可能满足需求，可能最终我们不得不选择网上更加成熟的框架，但无论如何，本人还是希望能够完善出一个比较好的图表框架出来。
让我们继续前行
----------------------------------------------------------------------
努力不一定成功，但不努力肯定不会成功。
共勉。