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

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

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

效果图-双折线图

效果图-双柱状图

<%@ 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. xtrabackup 2.3.3编译安装

    ***************************************************************** 安装 ******************************* ...

  2. 牛逼的postman,分类管理更好用

  3. 支撑百亿级应用的 NewSQL

    支撑百亿级应用的 NewSQL https://zhuanlan.zhihu.com/newsql/ 项目背景 初次接触 TiDB,是通过同程网首席架构师王晓波先生的分享,当时同程网正在使开发和数据库 ...

  4. B1607 [Usaco2008 Dec]Patting Heads 轻拍牛头 数学

    今天净做水题了,这个题还不到十五分钟就搞定了,思路特别简单,就是直接按照线性求因子个数的思路就行了. 题干: Description 今天是贝茜的生日,为了庆祝自己的生日,贝茜邀你来玩一个游戏. 贝茜 ...

  5. poj3926

    dp+优化 很明显可以用单调队列优化. 记录下自己犯的sb错误:  数组开小,sum没搞清... #include<cstdio> #include<cstring> usin ...

  6. AMQP server localhost:5672 closed the connection. Check login credentials: Socket closed

    2016-04-13 09:23:38.755 18850 INFO oslo.messaging._drivers.impl_rabbit [req-fafc8542-9403-4b5a-89d2- ...

  7. javascript从作用域链的角度看闭包

    闭包 闭包是一个能访问外部函数定义的变量的函数. 为什么? 当访问一个变量时,解释器会首先在当前作用域查找标示符,如果没有找到,就去父作用域找,直到找到该变量的标示符或者不再存在父作用域了,这就是作用 ...

  8. 【BZOJ1306】match循环赛

    预先警告:我的做法代码量比较大 看完题目后看到数据n<=8, 不难想到这题可以写深搜来做 分析 比如说以数据: 3 3 3 3 为例子, 进行了三场比赛:AB AC BC: 我们只要搜索每场比赛 ...

  9. Zeppelin0.6.2之shiro安全配置 初探

    0.序 默认情况下,Zeppelin安装好并且配置完zeppelin-site.xml和zeppelin-env.sh后,我们进入的模式,从右上角就能看出来是anonymous模式,这种模式下会看见所 ...

  10. ROS-URDF-Xacro

    前言:Xacro是一种宏语言,允许代码复用,使用Xacro可以减少URDF文件中的代码量. 参考自:http://wiki.ros.org/urdf/Tutorials/Using%20Xacro%2 ...