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

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

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

效果图-双折线图

效果图-双柱状图

<%@ 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. MySQL基础教程-绝对推荐

    https://wenku.baidu.com/view/1acfe579ee06eff9aef80752.html?from=search MySQL--公司培训PPT Mysql体系结构以及与Or ...

  2. 一段程序的人生 第10章: server

    从第0章開始看 第拾章 server     一切基本安顿下来,我開始认真的检阅一下我所栖身的文件夹.来到了外面的大世界,果然不一样.越是细致查看越是认为这里真是一个再好只是的地方. 这个文件夹里面有 ...

  3. 应用程序 /dev/rtc 编程 获取时间 2011-12-13 01:01:06【转】

    本文转载自:http://blog.chinaunix.net/uid-16785183-id-3040310.html 分类: 原文地址:应用程序 /dev/rtc 编程 获取时间 作者:yuwei ...

  4. linux patch 命令小结【转】

    本文转载自:http://blog.csdn.net/wh_19910525/article/details/7515540 说到patch命令,就不得不提到diff命令,也就是制作patch的必要工 ...

  5. Tool-Java:Spring Tool Suite

    ylbtech-Tool-Java:Spring Tool Suite Spring Tool Suite 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 0. ...

  6. Linux防火墙设置

    对于Internet上的系统,不管是什么情况都要明确一点:网络是不安全的.因此,虽然创建一个防火墙并不能保证系统100%安全,但却是绝对必要的. Linux提供了一个非常优秀的防火墙工具-netfil ...

  7. 10.3.3 WebView的几个常见功能

    (1)背景设置,例如下面的代码. webView.setBackgroundColor(0);//先设置背景色为transparent webView.setBackgroundResource(R. ...

  8. qW3xT.2挖矿病毒 解决过程及坑

    周一早上老大让我把项目更新一下,然后配置一下elasticsearch,我登上服务器之后部署的时候没有什么感觉,但是在配置elasticsearch的过程中感觉服务器哪个地方有点不对,下意识的top了 ...

  9. SnackDown Online Pre-elimination round A

    1. 应该n是偶数,就行吧.应该判断1个人,只能出现一次吧. #include<bits/stdc++.h> #define pb push_back typedef long long ...

  10. MyEclipse中快速复制粘贴当前行的操作