1 ChartDraws({ "canvasWidth" : 1000, 4 "canvasHeight" : 250, 5 "paddingLeft" : 50, 6 "paddingTop" : 50, 7 "columnChartData": [ 8 {NO:0,PT:0.2,Name:"Html/Css"}, 9 {NO:1,PT:0.4,Name:"Html5/Css3"}, 10 {NO:2,PT:0.4,Name:"JavaScript"}, 11 {NO:3,PT:0.5,Name:"JQuery"}, 12 {NO:4,PT:0.2,Name:"Angular.js"}, 13 {NO:5,PT:0.8,Name:"BootStrap"}, 14 {NO:6,PT:0.6,Name:"React.js"}, 15 {NO:7,PT:0.5,Name:"Java"} 16 ], 17 "yChartData" : [ 18 {NO:0,Name:"熟悉"}, 19 {NO:1,Name:"掌握"}, 20 {NO:2,Name:"精通"} 21 ], 22 "isNeedAnimation" : false, 23 "isNeedBorder" : false, 24 "isNeedLineChart":true, 25 "axisColor" : "#8DEEEE" 26 }); 27 ChartDraws({ "canvasWidth" : 1000, 30 "canvasHeight" : 250, 31 "paddingLeft" : 50, 32 "paddingTop" : 50, 33 "columnChartData": [ 34 {NO:0,PT:0.4,Name:"Html/Css"}, 35 {NO:1,PT:0.5,Name:"Html5/Css3"}, 36 {NO:2,PT:0.2,Name:"JavaScript"}, 37 {NO:3,PT:0.7,Name:"JQuery"}, 38 {NO:4,PT:0.2,Name:"Angular.js"}, 39 {NO:5,PT:0.3,Name:"BootStrap"}, 40 {NO:6,PT:0.8,Name:"React.js"}, 41 {NO:7,PT:0.2,Name:"Java"} 42 ], 43 "yChartData" : [ 44 {NO:0,Name:"熟悉"}, 45 {NO:1,Name:"掌握"}, 46 {NO:2,Name:"精通"} 47 ], 48 "isNeedAnimation" : false, 49 "isNeedBorder" : false, 50 "isNeedLineChart":false, 51 "isNeedColumnChart" : true, 52 "columnChartColor":"#9370DB" 53 }); 54 55 ChartDraws({ "canvasWidth" : 1000, 58 "canvasHeight" : 250, 59 "paddingLeft" : 50, 60 "paddingTop" : 50, 61 "columnChartData": [ 62 {NO:0,PT:0.4,Name:"Html/Css"}, 63 {NO:1,PT:0.5,Name:"Html5/Css3"}, 64 {NO:2,PT:0.2,Name:"JavaScript"}, 65 {NO:3,PT:0.7,Name:"JQuery"}, 66 {NO:4,PT:0.2,Name:"Angular.js"}, 67 {NO:5,PT:0.3,Name:"BootStrap"}, 68 {NO:6,PT:0.8,Name:"React.js"}, 69 {NO:7,PT:0.2,Name:"Java"} 70 ], 71 "yChartData" : [ 72 {NO:0,Name:"熟悉"}, 73 {NO:1,Name:"掌握"}, 74 {NO:2,Name:"精通"} 75 ], 76 "isNeedAnimation" : false, 77 "isNeedBorder" : true, 78 "isNeedLineChart":true, 79 "isNeedColumnChart" : false, 80 "lineChartColor" : "#8DB6CD", 81 "borderColor" : "#87CEFA" 82 })

html代码

下面是一个实现后的效果图

在整个编码的过程中我把代码改过一次，为什么改呢，因为在第一次的时候我在js里面使用了大量的   ChartDraws.prototype.XXXX = function(){};

后来我一想不对啊，我为什么要把这么多的方法暴露给外部呢......这不是没事找事么.......

所以现在就改成这样了，如果有不对的地方和可以改进的地方，希望路过的指点下，谢谢！还有那个白条代码背景怎么删不掉...........