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> < ...
随机推荐
- Photon + Unity3D 线上游戏开发 学习笔记(四)
这一节 我们建立 photon Server 端的框架 一个最简单的Photon框架 就包括一个 Applocation 类 和 一个 peer 类,作用例如以下: * Application 类是 ...
- 禁止root用户直接远程telnet/ssh登陆
AIX 封闭root,只能使用su登录root用户,禁止root用户直接远程登陆. 1. 禁止telnet登录 smit chuser ->root ->User can ...
- ubuntu下一款有点感觉的 linux音乐播放器 clementine(小橘子))
https://www.clementine-player.org/ 在linux听音乐的感觉确实不是很好,音乐播放器很多.但是仅仅只是数量上的优势,在确实不是很好用.自带的rhythmbox确实很占 ...
- html5--视频播放器实例
html5--视频播放器实例 总结: 1.相对定位和绝对定位的区别,两者都是浮起来了 2.属性和方法都是有对象的,搞清楚对象之后,属性和方法就很好用了,我们一般可以用document.getEleme ...
- 【POJ 3322】 Bloxorz I
[题目链接] http://poj.org/problem?id=3322 [算法] 广度优先搜索 [代码] #include <algorithm> #include <bitse ...
- gdb 断点调试C程序
最近在看CS50的公开课,视频中david用gdb调试C,我跟着敲,一样的代码但是却显示效果与他不一样.因为他的程序是编译好了的,所以也没看到编译步骤,后来回想一下他make 文件名 显示的代码中有一 ...
- Wireshark抓取RTP包,还原语音
最近在做基于SIP的VoIP通信研究,使用Wireshark软件可以对网络流量进行抓包. VoIP使用RTP协议对语音数据进行传输,语音载荷都封装在RTP包里面.要对传输中的语音进行截获和还原,需要通 ...
- 修改CAS源码是的基于DB的认证方式配置更灵活
最近在做CAS配置的时候,遇到了数据源不提供密码等数据的情况下,怎样实现密码输入认证呢? 第一步:新建Java项目,根据假面算法生成CAS加密工具 出于保密需要不提供自定义的加密工具,在您的实际项目中 ...
- .net core 下Web API 技术栈
API文档工具:swagger https://www.cnblogs.com/suxinlcq/p/6757556.html https://www.cnblogs.com/danvic712/p/ ...
- POJ1915 BFS&双向BFS
俩月前写的普通BFS #include <cstdio> #include <iostream> #include <cstring> #include <q ...