FusionCharts,双折线图和双柱状图

主页 > 新闻资讯 > 软件开发资讯 > Java编程Java软件开发 >

FusionCharts,双折线图和双柱状图

 一个电商项目中,用到了"双柱状图",对比 当前库存和累计库存。

网上找了好几个贴子,才找到具体用法。

代码整理下,以备不时之需。

 

效果图-双折线图

 

效果图-双柱状图

   
[javascript] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <script type="text/javascript" src="static/FusionCharts/FusionCharts.js"></script>  
  4. <script>  
  5.     //双折线图  
  6.     var swf="static/FusionCharts/n-MSLine.swf";  
  7.     //双柱状图  
  8.     //var swf = "static/FusionCharts/n-MSColumn2D.swf";  
  9.     $(function() {  
  10.         var chartObj = new FusionCharts(swf, 'chart', chartWidth, chartHeight);  
  11.         chartObj  
  12.                 .setDataXML("<graph caption='' subcaption='' hovercapbg='FFECAA' hovercapborder='F47E00' formatNumberScale='0' decimalPrecision='0' showvalues='0' numdivlines='3' numVdivlines='0' yaxisminvalue='1000' yaxismaxvalue='1800'  rotateNames='0'>"  
  13.                         + "<categories >"  
  14.                         + "<category name='商品A'  />"  
  15.                         + "<category name='商品B' />"  
  16.                         + "</categories>"  
  17.                         + "<dataset seriesName='累计库存' color='1D8BD1' anchorBorderColor='1D8BD1' anchorBgColor='1D8BD1'>"  
  18.                         + "<set value='1327' />"  
  19.                         + "<set value='1826' />"  
  20.                         + "</dataset>"  
  21.                         + "<dataset seriesName='当前库存' color='F1683C' anchorBorderColor='F1683C' anchorBgColor='F1683C'>"  
  22.                         + "<set value='2042' />"  
  23.                         + "<set value='3210' />"  
  24.                         + "</dataset>" + "</graph>");  
  25.         chartObj.render('chart');  
  26.   
  27.     });  
  28. </script>  
  29. <div id="chart"></div>  

 

友情提示:不同版本的JS,提供的API可能不一样。最初想通过JSON方式,设置数据,报错。



上一篇: java加解密之RSA使用   下一篇:没有了