首页 > 其他 > 详细

FusionCharts,双折线图和双柱状图

时间:2016-03-26 07:53:45      阅读:245      评论:0      收藏:0      [点我收藏+]

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

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

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


效果图-双折线图

技术分享


效果图-双柱状图
技术分享

   
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<script type="text/javascript" src="static/FusionCharts/FusionCharts.js"></script>
<script>
	//双折线图
	var swf="static/FusionCharts/n-MSLine.swf";
	//双柱状图
	//var swf = "static/FusionCharts/n-MSColumn2D.swf";
	$(function() {
		var chartObj = new FusionCharts(swf, ‘chart‘, chartWidth, chartHeight);
		chartObj
				.setDataXML("<graph caption=‘‘ subcaption=‘‘ hovercapbg=‘FFECAA‘ hovercapborder=‘F47E00‘ formatNumberScale=‘0‘ decimalPrecision=‘0‘ showvalues=‘0‘ numdivlines=‘3‘ numVdivlines=‘0‘ yaxisminvalue=‘1000‘ yaxismaxvalue=‘1800‘  rotateNames=‘0‘>"
						+ "<categories >"
						+ "<category name=‘商品A‘  />"
						+ "<category name=‘商品B‘ />"
						+ "</categories>"
						+ "<dataset seriesName=‘累计库存‘ color=‘1D8BD1‘ anchorBorderColor=‘1D8BD1‘ anchorBgColor=‘1D8BD1‘>"
						+ "<set value=‘1327‘ />"
						+ "<set value=‘1826‘ />"
						+ "</dataset>"
						+ "<dataset seriesName=‘当前库存‘ color=‘F1683C‘ anchorBorderColor=‘F1683C‘ anchorBgColor=‘F1683C‘>"
						+ "<set value=‘2042‘ />"
						+ "<set value=‘3210‘ />"
						+ "</dataset>" + "</graph>");
		chartObj.render(‘chart‘);

	});
</script>
<div id="chart"></div>


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

FusionCharts,双折线图和双柱状图

原文:http://blog.csdn.net/fansunion/article/details/50973840

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!