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

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

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

效果图-双折线图

效果图-双柱状图

<%@ 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,双折线图和双柱状图的更多相关文章

  1. FusionCharts中图的属性的总结归纳

    FusionCharts中图的属性的总结归纳 1.横坐标label间隔显示 labelStep="4" 2.柱状图有椭圆角 useRoundEdges="1"

  2. 3-Highcharts 3D图之3D柱状图分组叠堆3D图

    <!DOCTYPE> <html lang='en'> <head> <title>3-Highcharts 3D图之3D柱状图分组叠堆3D图</ ...

  3. 2-Highcharts 3D图之3D柱状图带可调试倾斜角度

    <!DOCTYPE> <html lang='en'> <head> <title>2-Highcharts 3D图之3D柱状图带可调试倾斜角度< ...

  4. FusionCharts MSBar3D图

    1.静态页面 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...

  5. FusionCharts MSBar2D图

    1.页面展示 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...

  6. FusionCharts ScrollColumn2D图

    FusionCharts ScrollColumn2D图 1.JSP页面 ScrollColumn2D.jsp: <%@ page language="java" conte ...

  7. highcharts 柱状图 折线图 混合 双纵轴显示

    $(function () { $('#container').highcharts({ chart: { zoomType: 'xy' }, title: { text: '' }, colors: ...

  8. Echarts-画叠加柱状图,双折线图

    导入echarts包 <script src='../scripts/libraries/echarts/echarts-all.js'></script> js如下 load ...

  9. 【前端统计图】echarts多条折线图和横柱状图实现

    参考链接:echarts官网:http://echarts.baidu.com/ 原型图(效果图): 图片.png 代码: <!DOCTYPE html> <html> < ...

随机推荐

  1. Python内置的字符串处理函数

    生成字符串变量 str='python String function'   字符串长度获取:len(str) 例:print '%s length=%d' % (str,len(str)) 连接字符 ...

  2. spark之map与flatMap差别

    scala> val m = List(List("a","b"),List("c","d")) m: List[ ...

  3. 计算cost--全表扫描

    以下教大家怎样手工算出oracle运行计划中的cost值. 成本的计算方式例如以下: Cost = (        #SRds * sreadtim +        #MRds * mreadti ...

  4. luogu2152 [SDOI2009]SuperGCD

    要你求两个非常大的数字的GCD. 不要想复杂,用高精度整更相减损术即可. #include <cstdio> #include <cstring> #include <a ...

  5. oc32--构造方法1

    // // Person.h #import <Foundation/Foundation.h> @interface Person : NSObject @property int ag ...

  6. B1060 [ZJOI2007]时态同步 dfs

    两遍dfs,第一遍有点像找重链,第二遍维护答案,每个点维护一个当前深度,然后就没啥了. ps:memset(lst,-1,sizeof(lst));这一句多余的话让我debug半天... 题干: De ...

  7. bzoj 3029 守卫者的挑战 —— 概率DP

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3029 设 f[i][j][k] 表示第 i 次挑战,已经成功 j 次,剩余容量为 k 的概率 ...

  8. Area(pick定理)

    http://poj.org/problem?id=1265 题意:起始为(0,0),给出每个点的偏移量,求依次连接这些点形成的多边形边界上格点的个数. 思路:先将各个点的坐标求出存入,由pick定理 ...

  9. C - Domino piling

    Problem description You are given a rectangular board of M × N squares. Also you are given an unlimi ...

  10. SQlserver 当输入参数为可选条件

    以前很懒,都是用拼接字符串的方式,加上if 语句,根据输入参数是否为空来判断是否需要在where 后加上对应字段的条件限制 但是拼接字符串很烦,又总是被转义符搞得很烦  '''' 所以想了其他办法 分 ...