对ichartjs基于基于HTML5的开源图形组件画图的心得

最新推荐文章于 2021-06-04 16:15:22 发布
疯狂的葡萄
最新推荐文章于 2021-06-04 16:15:22 发布
阅读量3k
点赞数 1
分类专栏： web前端文章标签：图形开源 ichartjs html5 开源项目
web前端专栏收录该内容
2 篇文章 0 订阅
订阅专栏
简介：ichartjs 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。如果你正在开发HTML5的应用，ichartjs正好适合您。chartjs是基于Apache License 2.0协议的开源项目。
心得：用ichartjs画图就是参照ichartjs官网（http://www.ichartjs.com/samples/index.html）的示例中心的示例以及ichartjs API（http://www.ichartjs.com/docs/zh/html/menu.html）（注：各个类的参数）就可以画出你想要的图形。
注意：现在项目中导入ichart.1.2.min.js库
示例：代码
[html]view plaincopy 
   
 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
 <html>  
   <head>  
     <script type="text/javascript" src="ichart.1.2.min.js"></script>  
     <script type="text/javascript">  
             $(function(){  
                   
                 var data = [  
                 {  
                 name : '安全库存达成率',  
                 value:[1.33,1.27,1.34,1.17,1.3,1.1,1.35,1.3,1.26,0.99],  
                 color:'#db9034',  
                 line_width:2  
                 },  
                 {  
                 name : '安全库存率',  
                 value:[1.25,1.25,1.25,1.25,1.25,1.25,1.25,1.25,1.25,1.25],  
                 color:'#e0b645',  
                 line_width:2  
                 }  
                 ];  
                 var labels = ["2013年1月","2013年2月","2013年3月","2013年4月","2013 年 5 月","2013年6月","2013年7月","2013年8月","2013年9月","2013年10月"];  
                 var chart = new iChart.LineBasic2D({  
                 render : 'canvasDiv',  
                 data: data,  
                 align:'center',  
                 title : {  
                 text:'安全库存达成率',  
                 fontsize:24,  
                 color:'#f7f7f7'  
                 },  
                 width : 1000,  
                 height : 400,  
                 shadow:true,  
                 shadow_color : '#20262f',  
                 shadow_blur : 4,  
                 shadow_offsetx : 0,  
                 shadow_offsety : 2,  
                 background_color:'#383e46',  
                 tip:{  
                 enable:true,  
                 shadow:true  
                 },  
                 legend:{  
                 enable:true,  
                 background_color : null,  
                 align:'center',  
                 valign:'bottom',  
                 row:1,  
                 column:'max',  
                 color:'#f7f7f7',  
                 legend_space:40,  
                 sign_size:20,  
                 offsety:20,  
                 border : {  
                     enable : false  
                 }  
                },  
                 crosshair:{  
                 enable:true,  
                 line_color:'#62bce9'  
                 },   
                 crosshair:{  
                 enable:true,  
                 line_color:'#62bce9'  
                 },  
                 sub_option : {  
                 label:false,  
                 hollow_inside:false,  
                 point_size:8  
                 },  
                 coordinate:{  
                 width:'82%',  
                 height:'80%',  
                 gridVStyle:{color:'#383e46'},  
                 grid_color:'#cccccc',  
                 axis : {  
                 width : 0  
                 },  
                 grids:{  
                 horizontal:{  
                 way:'share_alike',  
                 value:8  
                 },  
                 vertical: {  
                  way:'share_alike',   
                  value:1   
                  }   
                   
                 },  
                 scale:[{  
                 position:'left',  
                 start_scale:0.7,  
                 end_scale:1.5,  
                 scale_space:0.1,  
                 scale_size:2,  
                 scale_enable:false,  
                 label : {color:'#ffffff',fontsize:12},  
                 scale_color:'#9f9f9f'  
                 },{  
                 position:'bottom',  
                 label : {color:'#ffffff',fontsize:12},  
                 labels:labels  
                 }]  
                 }  
                 });  
                 //开始画图  
                 chart.draw();  
                 });  
   
   </script>  
   </head>  
     
   <body>  
   <div id="canvasDiv"></div>  
   </body>  
 </html>  
   
 <pre class="html" name="code"><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
 <html>  
   <head>  
     <script type="text/javascript" src="ichart.1.2.min.js"></script>  
     <script type="text/javascript">  
   
     $(function(){  
         var data = [  
             {  
                 name : '招标采购额占比',  
                 value:[83,86,85,78,91,81,59,82,84,65],  
                 color:'#4f81bd'  
             },  
             {  
                 name : '非招标采购额占比',  
                 value:[17,14,15,22,9,19,41,18,16,35],  
                 color:'#e0b645'  
             },  
             {  
                 name :'常规招标采购比例',  
                 value:[],  
                 color :'#f7f7f7'  
             }  
         ];  
         var chart = new iChart.ColumnStacked2D({  
         render : 'canvasDiv',  
         data: data,  
         labels:["2013年1月","2013年2月","2013年3月","2013年4月","2013年5月","2013年6月","2013年7月","2013年8月","2013年9月","2013年10月"],  
         title : {  
             text:'招标采购比例',  
             color:'#f7f7f7'  
         },  
         align:'center',  
         width : 1000,  
         height : 500,  
         background_color :'#383e46',  
         shadow : true,  
         shadow_blur : 3,  
         shadow_color : '#aaaaaa',  
         shadow_offsetx : 1,  
         shadow_offsety : 0,  
         label:{color:'#f7f7f7'},  
         legend:{  
             enable:true,  
             background_color : null,  
             align:'center',  
             valign:'bottom',  
             row:1,  
             column:'max',  
             color:'#f7f7f7',  
             legend_space:30,  
             offsetx:-90,  
             offsety:10,  
             sign_size:12,  
             border : {  
                 enable : false  
             }  
         },  
         tip:{  
         enable :true,  
         listeners:{  
             //tip:提示框对象、name:数据名称、value:数据值、text:当前文本、i:数据点的索引  
             parseText:function(tip,name,value,text,i){  
             return name+":"+value;  
             }  
           }  
         },  
         percent:true,//标志为百分比堆积图  
         showpercent:true,  
         text_space : 1,//坐标系下方的label距离坐标系的距离。  
         zScale:8,  
         xAngle : 50,  
         sub_option:{  
            label :false  
         },   
         bottom_scale:1.1,  
         coordinate:{  
             width:'82%',  
             height:'80%',  
             board_deep:10,//背面厚度  
             pedestal:false,  
             left_board:false,//取消左侧面板  
             shadow:false,//底座的阴影效果  
             grid_color:'#6a6a80',//网格线  
             axis : {  
                 width : 0  
             },  
             scale:[{  
                 position:'left',  
                 scale_enable : false,  
                 start_scale:0,  
                 scale_space:50,  
                 label:{color:'#f7f7f7'}  
             }]  
         }  
         });  
             var data1 = [  
                 {  
                 name : '常规招标采购比例',  
                 value:[80,80,80,80,80,80,80,80,80,80],  
                 color:'#f7f7f7',  
                 line_width:4  
                 }  
             ];  
         var line = new iChart.LineBasic2D({  
             z_index:1000,  
             data: data1,  
             tip:{  
                 enable :true,  
                 listeners:{  
                 //tip:提示框对象、name:数据名称、value:数据值、text:当前文本、i:数据点的索引  
                 parseText:function(tip,name,value,text,i){  
                 return name+":"+value;  
                }  
               }  
             },  
             sub_option : {  
             smooth:true,  
             label:false,  
           
             hollow_inside:false,  
             point_size:10  
             },  
             intersection:false,  
             coordinate:chart.coo  
             });  
             chart.plugin(line);  
         chart.draw();  
         });  
   
   
   </script>  
   </head>  
     
   <body>  
   <div id="canvasDiv"></div>  
   </body>  
 </html>  
 </pre><br>  
 <pre></pre>  
 <p> </p>  
 <p><span style="font-size:18px; color:#000000">               效果：<img alt="" src="https://img-blog.csdn.net/20131113141837546?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWlucmFuZXI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"><img alt="" src="https://img-blog.csdn.net/20131113141851859?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWlucmFuZXI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"></span></p>  
 <pre></pre>  