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方式,设置数据,报错。

时间: 2024-10-25 02:00:52

FusionCharts,双折线图和双柱状图的相关文章

FusionCharts 2D双折线图

1.设计思路 (1)根据双折线图的特性和共性,设计出双折线图: (2)设置数据源XML格式 2.设计步骤 (1)写出双折线引入的图类型和数据源路径 var doubleLine = new FusionCharts( "../scripts/Charts/MSLine.swf", "doubleLineId", "100%", "540", "0" ); doubleLine.setXMLUrl("

3-Highcharts 3D图之3D柱状图分组叠堆3D图

<!DOCTYPE> <html lang='en'> <head> <title>3-Highcharts 3D图之3D柱状图分组叠堆3D图</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script src="../jquery-2.1.4/jquery.min.js&q

2-Highcharts 3D图之3D柱状图带可调试倾斜角度

<!DOCTYPE> <html lang='en'> <head> <title>2-Highcharts 3D图之3D柱状图带可调试倾斜角度</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script src="../jquery-2.1.4/jquery.min.js&

照猫画虎学gnuplot之双折线图

上节讲了如何用gnuplot进行数据绘图,即如何画单折线图.实验中经常碰到的情况是,我们要同时处理多组数据.本节将讲解如何把多组数据绘制在同一个图上,即如何在同一个二维平面上画多个折线图. 依然拿城市降水量举例,下面就是我们的数据文件,文件名是"jiangshui.dat": 然后在*.plt文件中录入下列命令: 用gnuplot软件将该*.plt文件打开,如下图所示: 这里使用了一个新的命令:using.在数据文件包含超过一组数据时,我们可以用using指定使用哪列数据.例如usin

图说可视化,报表也能做得如此酷炫!

1.数据可视化概述 1.1.数据可视化的作用 数据可视化是指将数据通过图表的方式传递出来,让用户能够快速.准确地理解信息所要表达的内容,从而提高沟通效率.数据可视化的作用主要有: 1)传递更多的信息,一张图能够传递的信息可能需要长篇大论才能写清楚,如你要描述最近一年公司收入情况,那你就需要说明每个月收入是多少,同比.环比增幅是多少,收入最多.最少的是哪个月,同比.环比增幅最低.最高的是哪个月等,而你用图表表示则只需要一个柱状图和折线图的组合图表,就能准确表达上面的信息. 2)形象生动,便于理解,

百度推出的echarts,制表折线图柱状图饼图等的超级工具

一.简介: 1.绘制数据图表,有了它,想要网页上绘制个折线图.柱状图,从此easy. 2.使用这个百度的echarts.js插件,是通过把图片绘制在canvas上在显示在页面上. 官网对echarts的简介: ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的Canvas类库ZRen

Wijmo金融图表系列之等量图&amp;成交量柱状图

Wijmo金融图表有很多类型,我们来一一介绍.之前介绍了平均K线图(Heikin-Ashi)和砖形图,现在我们来一起看看等量图和成交量柱状图. 图表 #3: 等量图(EquiVolume) 等量图和K线图相似,但是以宽度可变的框(无蜡烛芯)代替了k线.取缔了开盘/收盘组件的是等量图线框包含了高价和低价组件,并且线框宽度成为第三个标识:成交量.下面的示例表示为一天的总交易额.颜色表示收盘价是否高于或低于前面的收盘价. 下面示例中,您可以看到股价哪里呈上升趋势,哪里下跌,在10月29至30日,在股价

FusionCharts Free 甘特图

用FusionCharts做甘特图 1.同步方式(用xml格式字符) 前台aspx代码 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">     <meta http-eq

数据可视化分析(柱状图、饼图、折线图、雷达图)

分析文件’课程成绩.xlsx’,至少要完成内容: 1)每年不同班级平均成绩情况 2)不同年份总体平均成绩情况 3)不同性别学生成绩情况,并分别用合适的图表展示出三个内容的分析结果. 导入相应的库 from functools import reduce import xlrd from flask import Flask, jsonify, render_template, request, url_for from pyecharts import Line,Bar,Pie,Radar py