今天要给大家介绍的是运用JSCharts来实现web页面的统计图绘制。

大家先来看一个最简单的例子，直接上代码：

   
   
   
   
    
    
    
    
    
  1. >
    2. 
    
    
    
    
    3. 
    
    
    
    
    4. 
    
    
    
    
  4. <html>
    5. 
    
    
    
    
  5. <head>
    6. 
    
    
    
    
    7. 
    
    
    
    
  7. <metahttp-equiv="content-type"content="text/html;charset=utf-8">
    8. 
    
    
    
    
  8. <title>JSChart Testtitle>
    9. 
    
    
    
    
    10. 
    
    
    
    
  10. <scripttype="text/javascript"src="jscharts_mb.js">script>
    11. 
    
    
    
    
  11. head>
    12. 
    
    
    
    
  12. <body>
    13. 
    
    
    
    
    14. 
    
    
    
    
  14. <divid="graph">JSCharts...div>
    15. 
    
    
    
    
  15. <scripttype="text/javascript">
    16. 
    
    
    
    
  16.     // 定义一个Array数组  
    17. 
    
    
    
    
  17.     var myData = new Array([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]);  
    18. 
    
    
    
    
  18.     //定义一个JSChart,graph是展示图表的层，line是展示类型：线形，还可以是饼图、柱状图  
    19. 
    
    
    
    
  19.     var myChart = new JSChart('graph','line');  
    20. 
    
    
    
    
  20.     //将数组信息注入mychart  
    21. 
    
    
    
    
  21.     myChart.setDataArray(myData);  
    22. 
    
    
    
    
  22.     //绘图  
    23. 
    
    
    
    
  23.     myChart.draw();  
    24. 
    
    
    
    
  24. script>
    25. 
    
    
    
    
  25. body>
    26. 
    
    
    
    
  26. html>
    27.

效果图如下：

运用JSCharts实现web页面统计图的绘制_第1张图片



以上为通过Array数组的方式注入信息，还可以通过xml或者json的方式来注入数据

JSCharts还能绘制饼图和柱形图，大家可以去参照官网说明文档


最后公布本控件下载地址：http://www.jscharts.com/

模版图形使用实例http://www.jscharts.com/how-to-use-bar-charts

此网站还可以在网站中编辑好你所需要的样式，然后再下载相关调用代码编辑地址为：http://www.jscharts.com/template


官网使用实例，但很多实例都需要在标签中手动添加如下语句，否则无法正常运行：


免费版本水印去除

搜索 gy=1a.gz 前面加 gx="<"; 图标标题是 chart.setTitle('**********')

js charts 3版本中，搜索一下关键字 fs.bg.2v(fX)直接删除即可