今天写页面页面需求到柱状图标,今天介绍一下我所用的Chart.js图表插件官网:http://www.bootcss.com/p/chart.js/ 里面会有下载js文件和中文文档一、接下来简单说一下用法 <!DOCTYPE html&g ...
今天写页面页面需求到柱状图标,今天介绍一下我所用的Chart.js图表插件
官网:http://www.bootcss.com/p/chart.js/ 里面会有下载js文件和中文文档
一、接下来简单说一下用法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script src='/images/loading.gif' data-original="chart.js"></script></head><body><canvas width="500px" height="500px" ></canvas><script> var data = { //先写data对象 ,如果先写了 new Chart(x),Bar(data) 因为代码的执行顺序,你会发现data还没创建所以获取不到 labels : ["1","2","3","4","5","6","7","8","9","10","11","12"], //这行意思代表了你那些分类,比如成绩表图下的姓名 datasets : [ //这个中的写的是分类有多少可以写多少比如成绩表中的语、数、英各科成绩 { fillColor : "rgba(220,220,220,0.5)", //填充rgba颜色,可以根据需求来自定义 strokeColor : "rgba(220,220,220,1)", //线条颜色 pointColor : "rgba(220,220,220,1)", //点的颜色 pointStrokeColor : "#fff", //点的线条颜色 data : [65,59,90,81,56,55,40,55,65,75,95,77] //假如这条数据代表了语文成绩,那每个下标和上面相对应的名字就是这个人的语文成绩了。 }, { fillColor : "rgba(151,187,205,0.5)", strokeColor : "rgba(151,187,205,1)", pointColor : "rgba(151,187,205,1)", pointStrokeColor : "#fff", data : [28,48,40,19,96,27,50,12,52,34,37,90] } ] } var ca=document.getElementsByTagName("canvas")[0]; var x=ca.getContext("2d") new Chart(x).Line(data);//这个意思是在那个画布中画什么养的图标。</script></body></html>
原标题:canvas的Chart图表插件
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。