jQuery图表制作——jqchart的应用1
编程技术 / houtizong 发布于 3年前 89
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>jqchart</title><!--制作图像必备的canvas插件 这个是将canvas标签转换为IE认识的vml--><!--[if IE]><script src="js/jqchart/excanvas-compressed.js" type="text/javascript" ></script><![endif]--><script src="js/jqchart/jquery.js" type="text/javascript"></script><!--jQuery图标插件--><script src="js/jqchart/jquery.jqchart.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">jQuery = $;</script><script type="text/javascript">jQuery(document).ready(function(){//原始样式var chartSetting={data : [ [435,500,600,700,888,777,925] ]};jQuery('#canvasMyID5').jQchart(chartSetting);//个人设置样式var diy_chartSetting={ config : { title : "图表说明(也就是图标的头部)", titleLeft: 80,//图表头部说明距离画布最左端的距离 titleTop:20,//图表头部说明距离画布最上端的距离 labelX : ["X1","X2","X3","X4","X5","X6","X7"], scaleY : {min: 0,max:1000,gap:200}, width: 680, //有影响 height: 500, //有影响 chartHeigth:450, chartWidth:650, paddingT : 50, //有影响 paddingR : 50, //有影响 paddingB : 50, //有影响 paddingL : 50 //有影响 }, data : [ [435,500,600,700,888,777,925], [50,123,312,200,402,300,512], [100,400,790,640,128,347,567] ] }; jQuery('#canvasMyID').jQchart(diy_chartSetting);});</script></head><body><div style="text-align:center;color:red;font-weight:bold;">jqchart默认显示格式</div><canvas id="canvasMyID5" height="400" width="680"></canvas><div style="text-align:center;color:red;font-weight:bold;">jqchart自定义显示格式</div><canvas id="canvasMyID" height="400" width="680"></canvas></body></html> 请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];
文章归档
文章标签
友情链接
