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> < ...
随机推荐
- MySQL基础教程-绝对推荐
https://wenku.baidu.com/view/1acfe579ee06eff9aef80752.html?from=search MySQL--公司培训PPT Mysql体系结构以及与Or ...
- 一段程序的人生 第10章: server
从第0章開始看 第拾章 server 一切基本安顿下来,我開始认真的检阅一下我所栖身的文件夹.来到了外面的大世界,果然不一样.越是细致查看越是认为这里真是一个再好只是的地方. 这个文件夹里面有 ...
- 应用程序 /dev/rtc 编程 获取时间 2011-12-13 01:01:06【转】
本文转载自:http://blog.chinaunix.net/uid-16785183-id-3040310.html 分类: 原文地址:应用程序 /dev/rtc 编程 获取时间 作者:yuwei ...
- linux patch 命令小结【转】
本文转载自:http://blog.csdn.net/wh_19910525/article/details/7515540 说到patch命令,就不得不提到diff命令,也就是制作patch的必要工 ...
- Tool-Java:Spring Tool Suite
ylbtech-Tool-Java:Spring Tool Suite Spring Tool Suite 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 0. ...
- Linux防火墙设置
对于Internet上的系统,不管是什么情况都要明确一点:网络是不安全的.因此,虽然创建一个防火墙并不能保证系统100%安全,但却是绝对必要的. Linux提供了一个非常优秀的防火墙工具-netfil ...
- 10.3.3 WebView的几个常见功能
(1)背景设置,例如下面的代码. webView.setBackgroundColor(0);//先设置背景色为transparent webView.setBackgroundResource(R. ...
- qW3xT.2挖矿病毒 解决过程及坑
周一早上老大让我把项目更新一下,然后配置一下elasticsearch,我登上服务器之后部署的时候没有什么感觉,但是在配置elasticsearch的过程中感觉服务器哪个地方有点不对,下意识的top了 ...
- SnackDown Online Pre-elimination round A
1. 应该n是偶数,就行吧.应该判断1个人,只能出现一次吧. #include<bits/stdc++.h> #define pb push_back typedef long long ...
- MyEclipse中快速复制粘贴当前行的操作