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

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

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

效果图-双折线图

效果图-双柱状图

<%@ 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. linux下apache+openssl配置记录

    软件环境 Apache Httpd 2.2.29 (http://httpd.apache.org ) OpenSSL 1.0.1h (http://www.openssl.org/source ) ...

  2. BZOJ 2048 2009国家集训队 书堆 数学算法

    题目大意:经典的物理上的桌边堆书问题,初中物理老师以前还讲过,只是仅仅记住了结论. . . 没关系,简单证明一下就好 首先我们设由上至下第i本书比它以下那本书多伸出去的长度为a[i],前缀和为s[i] ...

  3. Android Fragment和Activity的交互介绍

    Fragment和Activity的交互 一个Fragment的实例总是和包括它的Activity直接相关. fragment能够通过getActivity() 方法来获得Activity的实例.然后 ...

  4. Codeforces Round #332 (Div. 2)A. Patrick and Shopping 水

    A. Patrick and Shopping   Today Patrick waits for a visit from his friend Spongebob. To prepare for ...

  5. 【最短路算法】Dijkstra知识点&代码

    代码: #include<iostream> #include<vector> #include<cstdio> #include<queue> #in ...

  6. luogu1265 公路修建

    题目描述 某国有n个城市,它们互相之间没有公路相通,因此交通十分不便.为解决这一“行路难”的问题,政府决定修建公路.修建公路的任务由各城市共同完成. 修建工程分若干轮完成.在每一轮中,每个城市选择一个 ...

  7. Linux:命令gedit

    首先,gedit是一个GNOME桌面环境下兼容UTF-8的文本编辑器.它使用GTK+编写而成,因此它十分的简单易用,有良好的语法高亮,对中文支持很好,支持包括gb2312.gbk在内的多种字符编码. ...

  8. 针对深度学习(神经网络)的AI框架调研

    针对深度学习(神经网络)的AI框架调研 在我们的AI安全引擎中未来会使用深度学习(神经网络),后续将引入AI芯片,因此重点看了下业界AI芯片厂商和对应芯片的AI框架,包括Intel(MKL CPU). ...

  9. POJ 3579 Median (二分)

                                                                                                         ...

  10. B1041 [HAOI2008]圆上的整点 数学

    这个题一开始看着没什么思路,但是一看题解就明白了不少,主要是数学证明,代码很好写. 贴个网址: hzwer 题干: 题目描述 求一个给定的圆(x^+y^=r^),在圆周上有多少个点的坐标是整数. 输入 ...