FusionCharts,双折线图和双柱状图
一个电商项目中,用到了"双柱状图",对比 当前库存和累计库存。
网上找了好几个贴子,才找到具体用法。
代码整理下,以备不时之需。
效果图-双折线图
效果图-双柱状图
<%@ 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,双折线图和双柱状图的更多相关文章
- FusionCharts中图的属性的总结归纳
FusionCharts中图的属性的总结归纳 1.横坐标label间隔显示 labelStep="4" 2.柱状图有椭圆角 useRoundEdges="1"
- 3-Highcharts 3D图之3D柱状图分组叠堆3D图
<!DOCTYPE> <html lang='en'> <head> <title>3-Highcharts 3D图之3D柱状图分组叠堆3D图</ ...
- 2-Highcharts 3D图之3D柱状图带可调试倾斜角度
<!DOCTYPE> <html lang='en'> <head> <title>2-Highcharts 3D图之3D柱状图带可调试倾斜角度< ...
- FusionCharts MSBar3D图
1.静态页面 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...
- FusionCharts MSBar2D图
1.页面展示 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...
- FusionCharts ScrollColumn2D图
FusionCharts ScrollColumn2D图 1.JSP页面 ScrollColumn2D.jsp: <%@ page language="java" conte ...
- highcharts 柱状图 折线图 混合 双纵轴显示
$(function () { $('#container').highcharts({ chart: { zoomType: 'xy' }, title: { text: '' }, colors: ...
- Echarts-画叠加柱状图,双折线图
导入echarts包 <script src='../scripts/libraries/echarts/echarts-all.js'></script> js如下 load ...
- 【前端统计图】echarts多条折线图和横柱状图实现
参考链接:echarts官网:http://echarts.baidu.com/ 原型图(效果图): 图片.png 代码: <!DOCTYPE html> <html> < ...
随机推荐
- Oracle学习(一):基本操作和基本查询语句
文中以"--"开头的语句为凝视,即为绿色部分 1.知识点:能够对比以下的录屏进行阅读 SQL> --录屏工具spool,開始录制,并指定保存路径为c:\基本查询.txt SQ ...
- Windowns 无法启动 Office Software Protection Platform 服务,系统找不到指定的文件
导致该服务无法启动的原因是,用kms8激活了win7后又用oem8激活试了下,结果就这样,然后就无法激活了,状态ID都不可用.试过禁用计划任务项目,重建MBR,重建PBR,都无效果.最后在这里找到了解 ...
- public static float CompareExchange(ref float location1,float value,float comparand)
https://msdn.microsoft.com/en-us/library/k9hz8w9t(v=vs.110).aspx Compares two single-precision float ...
- B1257 [CQOI2007]余数之和 数学,分块
这个题想明白之后很好做,但是不好想.我根本没想出来,上网看了一下才知道怎么做... 这个题其实得数是一个等差数列,然后一点点求和就行了. 上次NOIP就是没看出来规律,这次又是,下次先打表找规律!!! ...
- poj1041 John's trip——字典序欧拉回路
题目:http://poj.org/problem?id=1041 求字典序欧拉回路: 首先,如果图是欧拉图,就一定存在欧拉回路,直接 dfs 即可,不用 return 判断什么的,否则TLE... ...
- (Go)07.Go语言中strings和strconv包示例代码详解02
1.strings使用 统计字符串出现次数 strings.Count(s string, substr string) int Count 用于计算字符串 substr 在字符串 s 中出现的非重叠 ...
- Visual Studio q启动卡顿
在开发人员CMD下面执行 Devenv.exe /ResetSettings ,然后顺利打开 总发现vs2015经常把cpu给占满了,导致电脑卡的不要不要的.这是CodeLens引起的,因为装了VAs ...
- 【HDU1698】 Just a Hook 【线段树入门】
原题:原题链接 题意:(机器翻译的...) 让我们将钩子的连续金属棒从1到N编号.对于每次操作,Pudge可以将连续的金属棒(从X到Y编号)改为铜棒,银棒或金棒. 钩的总值计算为N个金属棒的值的总和. ...
- ASP.NET的Eval方法和Bind方法的区别
Eval是只读的方法(单向数据在邦定),所邦定的内容为不会提交回服务器. 比如图书的ISBN,并不想让用户做任何修改,可以使用<%# Eval('ISBN').TOString().Trim() ...
- SQL连接其它服务器操作
Exec sp_droplinkedsrvlogin ZYB,Null --删除映射(录与链接服务器上远程登录之间的映射) Exec sp_dropserver ZYB --删除远程服务器链接 EXE ...