完整代码导出OpenFlashChart的图片示例

合集下载

ofc帮助资料

ofc帮助资料

Open-Flash-Chart使用说明前几天思思老说要主动为公司写一些图形化统计的功能,我找了几个图形化工具,帮她先研究了下,哈~~~为什么选open-flash-chart呢?哈,因为图形比较漂亮,哈,而且用起来挺方便的!^_^open-flash-chart是一个flash图形工具,主要通过JS设置参数来控制图形的显示,主要有线、柱状及饼图. 基本上能满足数据统计分析的图形化显示需求。

优点:使用方便,一般浏览器都能支持使用,提供回调功能支持更高级的处理。

目录下JS是与swf交互的核心脚本,不过有些地方好像写得不大好,有些语法不遵从W3C标准,呵~~一点见解:个人觉得用ajax请求数据,然后在前台控制图形的显示比较好。

比起在后台直接生成HTML代码返回直接打印的好,怎么说网络传输量可以减少些,而且用前者还可能做成类似单例的加载方式。

所以个有觉得没必要用PHP 或JAVA等其它语言从后台返回的HTML的方式(虽然OPEN-FLASH-CHART 已经有支持的类),个人还是喜欢在前台用JS的方式来控制图形,哈哈~~~百变不离其宗!下面是我整理的一些文档,可以参考,应该是比较齐的了:===============================2010.11.17=================================JOFC2 - Java API for Open Flash Chart Version-22010-09-11 00:26最近在用Open Flash Chart做报表,在网上查了很多关于Open Flash Chart2的资料,可惜的是中文资料很少。

现在自己开始开发基于Struts 1的Open Flash Chart开发,准备在我的空间里把JOFC2中针对的各个图表的用法写出来,给大家做个借鉴首先下载JOFC2的jar包,可以在/p/jofc2/下载到,另外还有一个开发人员针对jofc2自己的扩展可以在/job/JOFC2/下载到,以下代码我用到的包是前者。

open-flash-chart2系列教程

open-flash-chart2系列教程

open-flash-chart2系列教程年底了,公司要统计销售数据,于是就找了几个开源免费的chart程序来研究,PHP/SWF Charts 和FusionCharts Free,不过最终还是选择了Open Flash Char,官方提供了很多实例,而做订单的销售统计并不需要多么花哨的东西,OFC2的功能也已经足够强大了。

2.0的版本数据格式完全用json来处理,非常灵活,官方提供了各种接口程序,包括PHP/PHP5、Pear、Python、Java、Dotnet,调用很简单<html><head><script type=”text/javascript” src=”js/swfobject.js”></script><script type=”text/javascript”>swfobject.embedSWF(“open-flash-chart.swf”, “my_chart”, “550″, “200″,“9.0.0″, “expressInstall.swf”,{”data-file”:”data.txt”});</script></head><body><p>Hello World</p><div id=”my_chart”></div></body></html>数据文件格式如下:{“y_legend”:{“text”:“Time of day”,“style”: “{color: #736AFF;}”},“elements”:[{"type": "line","colour": "#736AFF","text": "Avg. wave height (cm)","font-size": 10,"width": 2,"dot-size": 4,"halo-size": 0,"values" : [1.5,1.69,1.88,2.06,2.21,2.34,2.43,2.48,2.49,2.47,2.40,2.30,2.17,2.01,1.83,1.64,1.44,1.24,1.05,0.88,0.74,0.62,0.54,0.50 ,0.50,0.54,0.61,0.72,0.86,1.03,1.22,1.41,1.61,1.81,1.99,2.15,2.29,2.3 9,2.46,2.49,2.48,{"value":2.44,"colour":"#FF0000","tip":"monkies"},2.35,2.23,2.08]}], “x_axis”:{“labels”: {“rotate”: “vertical”,“labels”:["2:00am % ?,"2:10","2:20","2:30","2:40","2:50","3:00am","3:10","3:20","3:30","3:40","3:50","4:00am","4:10","4:20","4:30","4:40","4:50","5:00am","5:10","5:20","5:30","5:40","5:50","6:00am","6:10","6:20","6:30","6:40","6:50","7:00am","7:10","7:20","7:30","7:40","7:50","8:00am","8:10","8:20","8:30","8:40","8:50","9:00am","9:10","9:20"]}},“y_axis”:{“max”: 3}}数据放在data.txt里,演示上一节提到open-flash-chart2的数据是通过存储在txt文件中,然后通过类似那个http://yoururl/chart.html?ofc=datafile.txt这样的形式来加载不同的数据,当然ofc后面的参数可以是php文件,php类库的使用将在以后的教程中出现,本节将讨论使用js加载数据的另一种方法,代码如下:是<script type="text/javascript" src="js/json/json2.js"></script><script type="text/javascript" src="js/swfobject.js"></script><script type="text/javascript">swfobject.embedSWF("open-flash-chart.swf", "my_chart", "350", "200", "9.0.0");</script><script type="text/javascript">function ofc_ready(){alert('ofc_ready');}function open_flash_chart_data(){alert( 'reading data' );return JSON.stringify(data);}function findSWF(movieName) {if (navigator.appName.indexOf("Microsoft")!= -1) { return window[movieName];} else {return document[movieName];}}var data = {“elements”: [{"type": "bar","text": "u5317u4eac","values": [9.9355,18.2142,12.1315,11.9911,10.2637,4.152,5.8293,17.8541,17.1762,25.2105,24.9323,23.5468,2.7642,3.9232,30.6192,17.9746,26.1273,14.5226,17.3219,5.0837,2.1281,18.9674,8.3799]}],“title”: {“text”: “200812u9500u552eu7edfu8ba1u56feu8868″ },“y_axis”: {“min”: 0,“max”: 31,“steps”: 2},“x_axis”: {“labels”: {“labels”: ["01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23"]}},“y_legend”: {“text”: “ chart 1:10000″,“style”: “color:#736AEF; font-size:14px;”}};</script>演示这种方式更适合数据实时加载,比如php中带查询表单,open-flash-chart2的用法很灵活,如果你是新手可能现在还是一头雾水,上面的json的格式各个参数将在下一节里做详细的解释。

OpenFlashChart

OpenFlashChart
line.Set_Key("Test",12);
line.DotSize =5;
chart.AddElement(line);
chart.AddElement(bar);
Response.Clear();
Response.CacheControl ="no-cache";
Response.Write(chart.ToPrettyString());
"9.0.0",//flash播放器版本
"expressInstall.swf",
{"data-file":"datafile/test.aspx"}//數據文件路徑---这里是你要显示的数据(后面详讲)
);
</script>
PS:Default后台没代码
然后新建个文件夹“datafile”,在改夹下新建Web页“test.aspx”.
test.aspx后台代码为:
C# code
protectedvoidPage_Load(objectsender, EventArgs e)
{
OpenFlashChart.OpenFlashChart chart =newOpenFlashChart.OpenFlashChart();
Random random =newRandom();
这个例子实现的效果是—&g做法:先引入OpenFlashChart.dll,将open-flash-chart.swf,swfobject.js加入专案.
Default页面前台代码:
C# code
<title>OpenFlashChart</title>

转 open flash chart ofc 图表TeddyWang nb

转 open flash chart ofc 图表TeddyWang nb

转open flash chart ofc 图表TeddyWang nb转:open flash chart(ofc)图表2010年09月01日Java开源项目中制作图表比较出色的就是JFreeChart了,相信大家都听说过,它不仅可以做出非常漂亮的柱状图,饼状图,折线图基本图形之外,还能制作甘特图,仪表盘等图表。

在Web应用中可以为项目增色不少。

JFreeChart技术成熟,完全是通过Java代码控制图表生成,掌握难度不大。

但是它的一个缺点就是所有资源在服务器端生成,需要占用大量的服务器资源,而且图表以流的形式输送到客户端也占用了大量的网络资源。

对于服务器资源和网络资源吃紧的项目还不得不想办法,虽然JFreeChart非常的华丽,但是还好有Open Flash Chart,制作简单的柱状图,饼状图和折线图足够用,而且Flash的展示效果绝不比JFreeChart的差。

项目地址是:/open-flash-chart/先说说Open Flash Chart的工作原理,不要看到Flash就害怕,OFC的开发包内就是一个flash文件,其实我们不需要改动原有的Flash,只需给Flash提供符合规范的数据即可。

OFC所需的数据格式就是JSON,JSON不依赖于任何技术(Java,.NET和PHP都有生成JSON代码的工具),这就使得OFC更加Open。

本文从Java角度出发,使用Struts2框架,来分析OFC的使用。

GoogleCode社区的一款开源插件为Java开发者使用OFC提供了JSON生成的专用工具,那就是jofc2,我可以使用jofc2采用类似JFreeChart的方式来组织代码,大大提升开发效率。

该项目的地址是:项目按照Struts2的开发标准搭建,然后把OFC开发所需的flash文件,页面显示Flash的支持文件swfobject.js放到发布目录的相应位置,再将jofc2和其依赖的xstream的jar包放到WEB-INF/lib下并加入编译路径即可。

open_flash_chart 基础资料

open_flash_chart 基础资料

文档整理open flash chart 1.9楼鑫华2008年Q4旺旺 : vampireelfeEmail : xinhua.louxh@目录一、什么是open flash chart?4二、ofc目前状况5三、关于swfobject的简单说明?6四、如何使用open flash chart 7获取open flash char t。

7跑一个自带的demo 7动手写一个demo。

8五、参数整理11饼图(pie char t) 12有x,y轴类(参数值之间用逗号分割,并且逗号两边不能有空格) 13柱状图(bar chart) 15线状图(line chart) 16玻璃柱状图(glass bar char t) 17渐变柱状图(fade bar char t) 18速写柱状图(Sketch bar char t) 19 3D柱状图(3D bar char t) 20点状分布图(scatter char t) 21区域图(area char t) 22蜡烛图(candle char t) 23高低图(high low colse char t) 25六、关于tooltip 27七、总结一下 28文档整理open-flash-chart 1.9version 1.0楼鑫华2008年Q4一、什么是open flash chart?Open flash chart(简称ofc),是一个开源的flash报表组件。

我们不仅可以免费使用,而且还可以修改源码,来达到我们想要的效果。

客户端在得到数据以后,在Flash Player中渲染出报表图。

以下是V1.9的效果二、ofc目前状况目前通用的ofc版本为1.9,使用actionscript2.0编写。

同时,V1.9已经停止更新。

(还存在一些bug)。

最新的ofc版本为2.0,使用actionscript3.0编写,Adobe Flex编译。

V2.0目前处于beta 阶段。

Open Flash Chart图表的JSON格式基本属性详解

Open Flash Chart图表的JSON格式基本属性详解

数据文件必须是JSON格式.JSON对象的基本格式:{}把所有对象都编写在{}里面.让它看起来像下面JSON 数据格式:{"title":{"text": "Many data lines","style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}"}}Title(可选)所有属性参数都可选的.text:string , 标题style:string , CSS样式例子:{"title":{"text": " data line","style": "{font-size:20px; color:#000000; font-family:Verdana; text-align:center;}"}}Y_Legend(可选)所有属性参数都是可选.text:string, Y轴标题style:string, CSS样式例子:{"y_legend":{"text":" Chart","style":"{color:#736AEF; font-size:12px;}"}}X Axis(可选)这个对象的属性是可选的,如果没有指定属性将使用默认的X轴属性.所有可选属性:stroke: number, X轴线的宽度tick-height: number, X轴刻度线高度值colour: string, 线的颜色offset: boolean, 柱状图表中X轴的偏移最小值是0grid-color:string, 表格线颜色3d: boolean, 设置3Dsteps: 取决于tick-height属性labels: array of strings, 每个X点的标签例子:{"x_axis":{"stroke": 1,"tick-height": 10,"colour": "#d000d0","grid-colour": "#00ff00","labels": ["January,"February","March","April","May","June","July","Aug ust","Spetember"]}}Y Axis(可选)应该属性和X Axis差不多(因为官方没给出,不知道是不是编漏了)min:integer, Y轴最小值max: integer, Y轴最大值tick-length:number, Y轴刻度线长度例子:{"y_axis":{"stroke": 4,"tick-length": 3,"colour": "#d000d0","grid-colour":"#00ff00","offset": 0,"max": 20}}Elements 元素元素的属性是一个数组的通用对象这些通用对象图表类型为(line,bar,scatter等等){"elements":[{"type": "bar","alpha": 0.5,"colour": "#9933CC","text": "Page views","font-size": 10,"values" : [9,6,7,9,5,7,6,9,7]},{"type": "bar","alpha": 0.5,"colour": "#CC9933","text": "Page views 2","font-size": 10,"values" : [9,6,7,9,5,7,6,9,7]}]}Elements.bar柱状图表必须包含在元素数组type: string 必须是’bar’alpha: number, 0(透明)和1(不透明)之间的值colour:string, CSS颜色text:string, 图例说明文本font-size: number, 设置图例文本字体大小values: array of number, 柱子的高底例子:{"elements":[{"type": "bar","alpha": 0.5,"colour": "#9933CC","text": "Page views","font-size": 10,"values" : [9,6,7,9,5,7,6,9,7]}]}Elements.pie圆饼图表,必须包含在元素数据组里type:string, 必须是’pie’start-angle: number, 第一个切片角度colours:array of string, CSS颜色alpha:number, 0(透明)和1(不透明)之间的值stroke: number, 切片外边线宽animate: boolean, 切片图表动画values:array of objects, 每个切片值或者切片对象与值例子:{"elements":[{"type": "pie","start-angle": 180,"colours": ["#d01f3c","#356aa0","#C79810","#73880A","#D15600","#6BBA70"], "alpha": 0.6,"stroke": 2,"animate": 1,"values" : [0,2,{"value":0,"text":"zero"},2,6]}]}Elements.hbar横状图表values:array of objects 每个值含有"right"和"left"可选值例子:{"elements":[{"type": "hbar","colour": "#9933CC","text": "Page views","font-size": 10,"values" : [{"right":10},{"right":15},{"left":13,"right":17}]}]}Elements.line_dot线形图表values:array of number 一个数组集合例子:{"elements":[{"type": "line_dot","colour": "#736AFF","text": "Avg. wave height (cm)","font-size": 10,"width": 2,"dot-size": 4,"values" : [1.5,1.69,1.88,2.06,2.21,2.34,null,2.35,2.23,2.08]}]}Elements.line*注意:这是一个简单定义3种不同线形类型的图表(不明白的属性,请向上温习一下)例子:{"title":{"text":"Many data lines","style":"{font-size: 30px;}"},"y_legend":{"text":"Open Flash Chart","style":"{font-size: 12px; color:#736AFF;}" },"elements":[{"type": "line","colour": "#9933CC","text": "Page views","width": 2,"font-size": 10,"dot-size": 6,"values" : [15,18,19,14,17,18,15,18,17] },{"type": "line_dot","colour": "#CC3399","width": 2,"text": "Downloads","font-size": 10,"dot-size": 5,"values" : [10,12,14,9,12,13,10,13,12] },{"type": "line_hollow","colour": "#80a033","width": 2,"text": "Bounces","font-size": 10,"dot-size": 6,"values" : [5,7,9,7,4,6,1,2,5]}],"y_axis":{"max": 20},"x_axis":{"steps": 2,"labels": ["January","February","March","April","May","June","July","August","September"]}}例子:这是一个简单的横状图表的JSON对象内容(不明白的属性请向上温习){"title":{"text":"HBar Map X values","style":"{font-size: 20px; font-family: Verdana; text-align: center;}"},"elements":[{"type": "hbar","colour": "#9933CC","text": "Page views","font-size": 10,"values" : [{"right":10},{"right":15},{"left":13,"right":17}]}],"x_axis":{"min": 0,"max": 20,"offset": 0,"labels": ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v"] },"y_axis":{"stroke": 14,"tick-length": 30,"colour": "#d09090","grid-colour": "#00ff00","offset": 1,"labels": ["","",""]}}。

openFlashChart使用手册

openFlashChart使用手册

OpenFlashChartChartOpenFlashChartDataType DataSet DataProviderDataTypeDataProviderDataSetOpenFlashChartColumnXAxisYAxisTitle XLegend YLegend YLegendRight LegendToolTipAxisXYAxisLabel ElementsElementDataSetvalues LineDotStyleLineStyle AreaScatterColumnBarPieShapeTagsStackedColumnCandleChart: /wiki/Chart“ ”1.2.3.Chart Chart ( ) ( 1990 2000 )OpenFlashChart Adobe FlashElementOpenFlashChart 2 dorado 7 OpenFlashChart 2 OpenFlashChart 2 dorado OpenFlashChart 2 / Bug swfOpenFlashChartOpenFlashChartOpenFlashChartOpenFlashChart Element OpenFlashChart Element Element Element ChartElement XAxis YAxis YAxisRightOpenFlashChartTitle Chart ChartXAxis X XYAxis Y X YYAxisRight Y Element Y Y YXLegend X X X YLegend Y Y Y YLegendRight Y Y Y Legend Element ElementToolTipIDE OpenFlashChart dorado 7dorado 7 Grid GridOpenFlashChartdorado 7 HelloWorld DataType DataSet dorado 7 IDEOpenFlashChart dorado 7 dorado.ofc.jar jar Update Dorado Config Rules dorado View Advance OpenFlashChartDataType DataSet DataProviderView ViewView Model DataType DataType name Phone DataType PropertyDef name name priceDataProviderPhoneDataProviderimport java.util.ArrayList;import java.util.Collection;import java.util.HashMap;import java.util.List;import java.util.Map;import ponent;import com.bstek.dorado.annotation.DataProvider;@Componentpublic class PhoneDataProvider {@DataProviderpublic Collection<Map<String, Object>> getPhoneData() {List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();Map<String, Object> map = null;double values[] = new double[]{ 4868, 4999, 3550, 2550, 3360, 3380, 3999, 2420, 2980};String labels[] = new String[]{ "N8", "iPhone 4", "I9000", "Milestone", "N86", "S8500", "iPhone 3G", "ME600", "X6"};for (int i = 0, j = values.length; i < j; i++) {map = new HashMap<String, Object>();map.put("price", values[i]);map.put("name", labels[i]);list.add(map);}return list;}}DataSet dataProvider dataType idOpenFlashChartAdvance OpenFlashChart ViewColumnOpenFlashChart Elements ElementColumn Element Column OpenFlashChartdataSet bindingConfig valuePropertyXAxisColumn X YOpenFlashChart XAxis XAxis XAxis labelsShortcut N8,iPhone 4,I9000,Milestone,N86,S8500,iPhone3G,ME600,X6YAxisYAxis min 0 max 6000X Y OpenFlashChart title xLegend yLegendTitle XLegend YLegend YLegendRightCharttextstyle cssstyle cssfontmarginpaddingElement Chartalpha 0 1(0 1 )position rightbackgroundColor position rightborder position right borderColor position rightstroke position rightmargin position right padding position right position top rightvisibleshadow position rightOpenFlashChartbackgroundColorcolortitleStyle cssbodyStyle cssmouse Closest,Proximity,NormalBar Elementmouse Normal shadowstrokeroundedAxisChart Radar ElementElementPieColumn FilledColumn SketchColumn StackedColumn BarLine Area Scatter Shape TagsRadar Line Area Scatter!!X Y X X1.Axis Label2.Axis Line Axis Label3.Tick Axis Label4.Grid LineYX YcolorgridColorstroke X Yoffset X Ytruefalse maxminstepsmin 1 max 5 steps 1 label 1 2 34 5min 1 max 5 steps 2 label 1 3 5 zDepth3D 3d 0 3dlabels AxisLabelslabelsShortcut labelsXtickHeightYtickLengthXYXY1.2.min max steps X Y min max stepslabelsShortcutX Y labels XY labels X XAxisLabels Y Y YAxisLabels AxisLabels labels AxisLabel AxisLabels AxisLabel Labels AxisLabelAxisLabelscolor AxisLabelsrotate AxisLabels 0 -180 180 YAxisLabelssize AxisLabels 6stepstext AxisLabels Magic Valuevisible AxisLabels trueAxisLabelAxisLabelcolorrotate 0 -180 180size 6textalign label auto center1. auto2. centerjustify left center rightvisible trueX justify justify left center rightX justify X align auto align centerx y Arealabel Y spokeLabel XRadarAxiscolorgridColorstrokemaxminsteps GridLinelabels Y labelsShortcut labelsspokeLabels XspokeLabelsShortcut spokeLabelslabels RadarAxisLabelsstepscolorlabelsspokeLabels RadarAxisSpokeLabelscolorlabelsElementsElementalpha Element 0 1(0 1 )text Elementcolor Element Element ElementfontSize Elementcolors Element Element Elementvalues Element values ElementElementjsontoolTip Element Magic ValueElement MagicValuedataSet Element DataSetdataPath DataSet dataPathbindingConfig Element ElementTooltip Magic ValueMagic ValueElementDataSetOpenFlashChart dorado 7 Element DataSet DataSet Element bindingConfigProperty ( valueProperty yProperty) Element DataSetElement Column top bottom value DataSet Column top bottom value DataSet“ ” bindingConfig valuePropertyPhone DataType pricevaluesDataSet Element values json jsonjson Element json Shape Point x y values [{"x":2,"y":2},{"x": 4,"y":2},{"x":4,"y":4},{"x":3,"y":5},{"x":2,"y":4}]LineshowAnimationwidthaxis Y Y left rightcolordotStylelineStyle DotStyleDotDotAnchor 3BowDotStarSolid DotHollow DotDotStyletype Dot Dot Anchor, Bow, Dot, StarDot,HollowDot, SolidDotaxis Y left rightalpha Dot 0 1(0 1 )color DotdotSize Dot SolidDot HollowDot DotDot DothaloSize Dot Dot1 DottoolTipwidth Dot DotDot SolidDot DotAnchor Bow Starrotation Dot Anchor Bow Start-180 180hollow Dot Anchor Bow Starttrue DotbackgroundColor Dot Anchor Bow Start hollow truebackgroundAlpha Dot Anchor Bow Start hollow true0 1(0 1)Anchorsides Dot AnchorLineStyleLineStylestyle solid dash solidon dashoff dashLinevalue Dot Dot Yx Dot Xy Dot Y ValuetoolTip Magic ValueLineDot LineDotStyletype axis color dotSize haloSize width sides rotationhollow backgroundColor backgroundAlphaLineDot Line LineDotStyleLineDotAreaArea Line LinefillAlpha 0 1(0 1 )fillColorloop loop trueScatterScatter LineDot Line LineLine Scatter X Line Y Scatter Scattercolor Scatter axis Y Y left rightwidth type linetype Scatter line point pointColumnColumn Columnvalue Column toptop Column Ybottom Column Y Ycolor ColumntoolTip Magic ValueshowAnimationbarWidth Column X0 1 1 OpenFlashChartcolor Columntype Column Glass Cylinder CylinderCylinderOutline Dome Round RoundGlass Round3DColumn3D Plastic PlasticFlatBarBar Barvalue Bar rightleft Bar X Xright Bar Xcolor BartoolTip Magic ValueBarbarWidth Bar Y 01 1 OpenFlashChartcolor BarPiePie PieSlicetexttextlabel SlicelabelColor Slicevalue SlicetoolTip Magic Valuealpha 0 1(0 1 ) animateborderWidthgradientFilllabelColornoLabelsradiusstartAngleShapeShape Point Pointx Point xy Point YwidthlineColorlineAlpha 0 1(0 1 )color ShapeTagsTagalpha Tag 0 1(0 1 ) backgroundColor Tagcolor TagalignX center left right alignY above below center padX XpadY Yfontboldrotate Tag -180 180text TagfontSizeborderunderlineaxis Tag left rightx xy yalpha Tag 0 1(0 1 ) backgroundColor Tagcolor TagalignX center left right alignY above below center padX XpadY Yfontboldrotate Tag -180 180text TagfontSizeborderunderlineaxis Tag left rightStackedColumnStackvalues StackElementStackElementcolor StackElement Columnvalue StackElement ColumnStackedColumnkeys Key KeycolorfontSizetextCandleCandlevalue Candle toptop Candle Ybottom Candle Y Yhigh toplow bottomcolor CandlenegativeColor bottom>toptoolTip Magic ValueCandlecolor Candle negativeColor bottom>top。

Open-Flash-Chart参数说明

Open-Flash-Chart参数说明

Open-Flash-Chart参数说明
为什么选open-flash-chart呢?哈,因为图形比较漂亮,哈,而且用起来挺方便的!^_^
open-flash-chart是一个flash图形工具,主要通过JS设置参数来控制图形的显示,主要有线、柱状及饼图. 基本上能满足数据统计分析的图形化显示需求。

优点:使用方便,一般浏览器都能支持使用,提供回调功能支持更高级的处理。

目录下JS是与swf交互的核心脚本,不过有些地方好像写得不大好,有些语法不遵从W3C标准,呵~~
一点见解:个人觉得用ajax请求数据,然后在前台控制图形的显示比较好。

比起在后台直接生成HTML代码返回直接打印的好,怎么说网络传输量可以减少些,而且用前者还可能做成类似单例的加载方式。

所以个有觉得没必要用PHP或JAVA等其它语言从后台返回的HTML的方式(虽然OPEN-FLASH-CHART已经有支持的类),个人还是喜欢在前台用JS的方式来控制图形,哈哈~~~
百变不离其宗!
下面是我整理的一些文档,可以参考,应该是比较齐的了:。

使用flash as3代码来画图

使用flash as3代码来画图

使用flash as3代码来画图使用代码来画图但是我们不推荐这样做太累了演示使用Flash ActionScript 3.0 画一些基本的图形,以及对绘制的图形或其他可视对象做一些基本的转换•画图 - 通过 Shape 对象的 graphics 属性来执行矢量绘图命令o1、使用 lineStyle() 定义画图的线条样式o2、moveTo() - 设置当前绘画点;lineTo() - 以当前绘画点为起点,用当前定义的线条样式,画一条直线到目标点;curveTo() - 指定二次贝塞尔曲线的控制点和终点,从而完成曲线的绘制;drawRect() - 绘制矩形;drawCircle() - 绘制圆形;drawEllipse() - 绘制椭圆;o3、beginFill() 和 endFill() 用于填充他们之间所绘制的图形。

如果是渐变填充则对应的方法是 beginGradientFill 和 endFill()•转换 - 通过设置对象的 transform.matrix 属性,对其做相应的转换o Matrix.rotate() - 旋转的角度o Matrix.translate() - 平移的距离o Matrix.scale() - 缩放的比例o Matrix.b - 将矩阵垂直倾斜o Matrix.c - 将矩阵水平倾斜1、画图在 UI 上放置 8 个 Button名称分别为:btnLine, btnCurve, btnRectangle, btnCircle, btnEllipse, btnLiner, b tnRadial, btnClea分别用于演示:画直线,画曲线,画矩形,画圆形,画椭圆,线性渐变填充,放射性渐变填充,清除图形Main.aspackage{import flash.display.MovieClip;import ponentEvent;import fl.events.SliderEvent;import flash.display.Shape;import flash.geom.Matrix;import flash.display.GradientType;import flash.display.SpreadMethod;public class Main extends MovieClip{var originalMatrix:Matrix;public function Main():void{btnLine.addEventListener(ComponentEvent.BUTTON_DOW N, drawLine);btnCurve.addEventListener(ComponentEvent.BUTTON_DOW N, drawCurve);btnRectangle.addEventListener(ComponentEvent.BUTTON_D OWN, drawRectangle);btnCircle.addEventListener(ComponentEvent.BUTTON_DOW N, drawCircle);btnEllipse.addEventListener(ComponentEvent.BUTTON_DOW N, drawEllipse);btnLiner.addEventListener(ComponentEvent.BUTTON_DOW N, drawLinerGradient);btnRadial.addEventListener(ComponentEvent.BUTTON_DOW N, drawRadialGradient);btnClear.addEventListener(ComponentEvent.BUTTON_DOW N, clearGraphics);}// 画直线function drawLine(e:ComponentEvent):void{// lineStyle() - 定义画图的线条样式// 第一个参数:线条粗细,整数(0 - 255)// 第二个参数:线条的颜色值(16进制)// 第三个参数:不透明度(0 - 1)canvas.graphics.lineStyle(12, 0x000000);// moveTo() - 设置当前绘画点。

Open Flash Chart2组件的简单使用

Open Flash Chart2组件的简单使用

Open Flash Chart2组件的简单使用简介Open Flash Chart(简称OFC)是一款开源的以Flash和Javascript为技术基础的免费图表,用它能创建一些很有效果的报表分析图表。

最重要的是它是开源和免费的,由于平时我使用的是.NET的开发技术,所以就以.NET技术为研究对象,当然它可以支持多种语言。

支持的浏览器:IE6/7/8, Firefox 2.x+, Safari 3.0+, Opera 9.5+ 以及Konqueror 4.x+浏览器下载带有OpenFlashChart的网页,只要告诉data文件给OpenFlashChart即可。

其余的事由OpenFlashChart引擎完成支持的语言API: PHP, Perl, Python, Java, Ruby on Rails, asp .Net 来控制图表有两个Java语言的API项目——JOFC2和AJOFC,其中AJOFC是中国人写的,注释得很详细。

准备工作OFC2的安装主要包括两个部分,一个是OFC2本身,另外一个是用来产生JSON对象的JAVA套件。

其中第二个并不是必要的,但是为了开发便捷,我们建议使用组件进行开发。

在对一些相关的套件的使用过程中,发现了其中的一些区别:OFC官方的版本开发时间为2009年,从社区中看到作者好像已经不再进行更新,所以推荐使用由OFC社区后续更新的版本,在使用的过程当中,还没有发现有什么大的区别,至于详细的差别,可以自行进行测试。

还有一个需要注意的地方是:无论OFC2官方的版本和社区后续更新的版本,都不能在Y轴显示中文,且X轴不支持对中文的旋转。

如果需要需要对中文的支持,可以下载此Flash文件并替换原版文件。

替换此文件虽然可以解决中文的问题,但是此文件的大小却有7M之多,比起原版300多KB的文件,页面加载速度会慢很多,使用的时候需要注意頻寬的问题。

OFC2套件的使用推荐使用JOFC2开发中的版本,因为此版本对一些效果的支持较好,但是还是有些效果和官方的OFC不同步,例如饼状图的3D展开效果,不过JOFC2也是开源的项目,可以自己对JOFC2的源码进行修改来增加相应的功能;AJOC的使用虽然比较简单,但是目前只支持折线图,饼状图和柱状图。

FusionCharts 导出图片实例 java版

FusionCharts 导出图片实例 java版

因为项目需要,需要使用FusionCharts进行导出.下面就是自己写得例子.这个是就是FusionCharts的Readme.txt中提示的导出步骤FusionCharts服务器端输出处理程序- JSP的============================================== = =============================================For exporting the chart as image/pdf at server side using JSP, copy-paste the required files to your server1. FCExporter.jsp2. FCExporterError.jsp3. fcexporter.jar4. Resources/FCExporter_IMG.jsp5. Resources/FCExporter_PDF.jsp6. /Classes/fusioncharts_export.properties----- -----Please place the JSP in your web application, fcexporter.jar in WEB-INF/lib and fusioncharts_export.properties in WEB-INF/classes folder.FusionCharts Exporter has been tested with Java 6.FusionCharts出口商已经过测试,与Java 6。

The exportHandler attribute should have value "{Path}/FCExporter.jsp".在e xportHandler属性应具有的价值“(路径)/ FCExporter.jsp”。

Flash基础代码库图像处理PPT

Flash基础代码库图像处理PPT

//将库中位图对象的数据创建为对象,连同被遮罩的对象一起,作为参数传入toStage函数
toStage(new Center(), mMask_c);
toStage(new Right(), mMask_r);
toStage(new Left(), mMask_l);
function toStage(bmd:BitmapData, masker:MovieClip) {
FLASH动画制作
数字媒体专业群教学资源库项目组
ቤተ መጻሕፍቲ ባይዱ第一页,编辑于星期五:十四点 四十八分。
• 本节名称: 库图像处理
• 本节内容:
AS3.0
从库里导出图片到舞台
第二页,编辑于星期五:十四点 四十八分。
• 代码内容: //设置位图平滑,去除尺寸缩放时造成的锯齿
第二页,编辑于星期五:十四点 四十八分。 第一页,编辑于星期五:十四点 四十八分。
//设置位图平滑,去除尺寸缩放时造成的锯齿
bm.smoothing = true; //设置位图的遮罩 bm.mask = masker;
}
第三页,编辑于星期五:十四点 四十八分。
• 图例:
第四页,编辑于星期五:十四点 四十八分。
谢谢观看
第五页,编辑于星期五:十四点 四十八分。
width = masker. mask = masker; toStage(new Right(), mMask_r); mask = masker; y = masker. 第二页,编辑于星期五:十四点 四十八分。
toStage(new Left(), mMask_l); y = masker. 第一页,编辑于星期五:十四点 四十八分。 //基于位图数据,创建Bitmap对象并将其显示在舞台上 height = masker. 第四页,编辑于星期五:十四点 四十八分。

Flash图片轻松提取

Flash图片轻松提取

Flash图片轻松提取
作者:王勇
来源:《电脑爱好者·普及版》2008年第03期
平常喜欢看Flash,遇到喜欢的图片,就想将其从Flash中提取出来,保存到电脑中,借助FlashDigger Plus这款软件的帮忙便能轻松搞定。

1 打开FlashDigger Plus主界面(下载地址:/soft/132257.htm),在菜单中依次选择File→Open SWF File命令,打开要提取图片的Flash动画。

2 这时在窗口左侧的Objects标签页中,已经罗列出了Flash动画中所包含的不同类别组件,我们要找的图片便在JPEG Images组件中,单击展开它,从中找到自己要保存的图片。

保存时点击右下侧的Export to File图标按钮,在弹出的另存为窗口中设定保存路径和文件名,单击“保存”按钮便大功告成了。

小提示
FlashDigger Plus虽然是共享软件,但从中提取图片的功能并没有使用限制。

Flash第五集第六集形状补间图片分离按钮编程电影导入和导出等

Flash第五集第六集形状补间图片分离按钮编程电影导入和导出等
• 2、分别选定前后两个关键帧,用【修改/分 离】(ctrl+B)打散文字串。此命令在每个关 键帧上要做两次。第一次是打散第一 次ctrl+B后的效果
文字串 分离了
第二次ctrl+B 后的效果
文字串 像素矢 量化了
第一次CTRL+B后的效果
者IP地址。 • 设置过程如下图所示。 • 实验十八 文字超级链接
选定文字以后要在属 性框中录入域名地址
第六部分 FLASH按钮、场景与 编程
戴政国
一、在时间轴上添加stop()函数
• 动画在播映时会自动播放。为了不让动画 自动播放,可以在时间轴上设置一个stop() 函数。
• 例1:我们先在场景1里做了一个简单动画, 让一个正方形做直线运动,如下图所示。 在放映时动画会自动开始,可以在图层1的 第一个关键帧上设置一个动作函数stop()。
在新建文件时自 动生成场景1
在场景1里只做了一 个简单的动画效果。
对单键帧 单击左键
• 对第1帧上的关键帧单击右键,弹出快捷菜单,执行【动作】 命令,或者选定第1帧上的关键帧后按F9键,都会弹出动作 脚本编辑框,可以在框中编辑程序或者添加函数等。我们在 【时间轴控制】中寻找到STOP代码,双击它可添加到右边 代码编辑框中。这样以后在放映动画时不会再自动播放了, 会在第一帧上自动停下来等待。
• 如果第3步不做,不选定区域,那么也可以直接使用黑箭 头拖动鼠标选定一个矩形区,然后再剪裁图形。做演示。
实验十七 图片分离以后的剪裁和挖洞
三、超级链接
• 先做文字的超级链接,按钮的超级链接以 后在按钮中再讲。
• 方法: • 1、选定某个关键帧。 • 2、录入文字 • 3、在文字属性框中录入网页的地名景时不会自动放映所以使用在第1帧播放结束时才库文档分由于前面使用了gotoandplay这儿可以不使用playstopgotoandplay转场景时转场后会自动放映而使用prevscene和nextscene函数时转场后会处于等待状态

根据代码自动生成流程图

根据代码自动生成流程图

根据代码自动生成流程图流程图作为一种图形化的工具,可以帮助开发人员更好地理解和分析程序的逻辑结构。

然而,手动绘制流程图不仅耗时耗力,而且容易出错。

为了解决这个问题,许多开发人员开始寻找自动生成流程图的方法。

本文将介绍一种根据代码自动生成流程图的方法。

1. 代码解析要自动生成流程图,首先需要对代码进行解析。

代码解析是将源代码转化为抽象语法树(Abstract Syntax Tree,简称AST)的过程。

AST是一种以树形结构表示源代码的方法,每个节点代表了代码中的一个语法结构。

代码解析可以使用各种工具和库来实现,例如Python中的ast模块。

将代码解析为AST后,我们就可以遍历AST树,获取代码中的各个语法结构。

2. 构建流程图模型获取到代码的AST后,我们需要根据AST构建一个流程图模型。

流程图模型由节点和边组成,节点代表代码中的每个语法结构,边代表语法结构之间的关系。

在构建流程图模型时,需要考虑代码中的条件语句、循环语句等控制流结构。

条件语句可以用条件节点表示,循环语句可以用循环节点表示。

条件节点和循环节点可以通过边连接起来,形成条件分支和循环结构。

3. 生成流程图有了流程图模型后,我们就可以根据模型生成流程图。

流程图可以使用各种绘图工具来实现,例如Graphviz等。

通过绘图工具,我们可以将流程图模型转化为可视化的流程图。

在生成流程图时,可以使用不同的图形元素来表示不同的语法结构,例如矩形框表示节点,箭头表示边。

通过调整图形元素的位置和连线的方式,可以使得流程图更加清晰和易于理解。

4. 实例演示下面我们以一个简单的Python程序为例,演示根据代码自动生成流程图的过程:def calculate_sum(n):sum =0for i in range(n):if i %2==0:sum += ireturn sumresult = calculate_sum(10)print(result)首先,我们将这段代码解析为AST。

OpenFlashChart组件的使用

OpenFlashChart组件的使用

Open Flash Chart组件的使用简介OpenFlashChart是一个开源的报表制作组件,该组件能够自动生成一个好看的、动态的flash报表;该组件使用flash展示报表能够很好的做到与浏览器进行集成,目前浏览器基本都能很好的支持flash;该组件还支持一些简单的JavaScript,提供在图形上对外部URL 的链接;该组件非常小,java类一共不超过10个,可操作的API也很少,这样学习起来也非常容易上手。

但可阅读的文档非常少,在与其它框架集成方面还有些问题。

主要配置项:openflashchart.jar:Open Flash Chart组件,工程开始时引入(lib目录下)。

open-flash-chart.swf:Flash文件接口,通过该文件来生成Flash文件,备页面调用(在web 目录下,与WEB-INF目录并级)。

swfobject.js:Flash文件依赖的JS文件(在web目录下,与WEB-INF目录并级)。

Open Flash Chart主要有:HTML、JSP、Servlet等三种使用方式。

分别介绍如下:HTML方式:数据文件:data.txt以下数据都是以&结尾://设置图形标题、颜色&title=AAA,{font-size:30px; color:#000000}&//设置饼图的属性&pie=60,#9933CC,{display: n-one; font-size:16px; color:#ff0000;},false,3&&values=0,2,0,2,6&//设置各块图形的颜色&X colours=#d01f3c,#356aa0,#C79810,#73880A,#D15600,#6BBA70&&colours=#d01f3c,#356aa0,#C79810&//设置各块图形的onclick链接&links=javascript:alert('9'),javascript:alert('6'),javascript:alert(' 7'),javascript:alert('9'),javascript:alert('5'),javascript:alert('7') ,javascript:alert('6'),javascript:alert('9'),javascript:alert('9')&//设置饼图各块的标签&pie_labels=zero,two,zero,two (2),six&//设置各块图形单位&tool_tip=Value: #val#%&显示文件:chart.htmlFlash的数据路径需要在以下两个地方设置:<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"codebase="/pub/shockwave/cabs/fla sh/swflash.cab#version=8,0,0,0"width="500" height="250" //设置flash的大小id="ie_chart"align="middle"><param name="allowScriptAccess" value="always" /><param name="movie"value="open-flash-chart.swf?width=500&height=250&data=data.txt" /> //设置flash的大小和数据的来源(来源于data.txt文件)<param name="quality" value="high" /><param name="bgcolor" value="#FFFFFF" />//设置flash的大小和数据的来源(来源于data.txt文件)<embed src="open-flash-chart.swf?data=data.txt" quality="high"bgcolor="#FFFFFF" width="500" height="250"name="chart" align="middle" allowScriptAccess="always"type="application/x-shockwave-flash"pluginspage="/go/getflashplayer"id="chart" /></object>JSP方式:数据文件:chart-data-line.jsp<body><%int max = 50;List<String> data = new ArrayList<String>();//List<String> data2 = new ArrayList<String>();//List<String> data3 = new ArrayList<String>();List<String> links = new ArrayList<String>();//生成随机数据for(int i = 0; i < 12; i++) {data.add(Double.toString(Math.random() * max));//data2.add(Double.toString(Math.random() * max / 2));//data3.add(Double.toString(Math.random() * max / 3));links.add("javascript:alert('hello, i am no."+(i+1)+"')");}//创建图形对象Graph g = new Graph();//设置标题// Spoon sales, March 2007g.title("统计图-来自JSP", "{font-size: 25px;}");//将数据对象添加到图形对象上g.set_data(data);//g.set_data(data2);//g.set_data(data3);//设置图例g.line(2, "0x9933CC", "Page views", 10, 2);//g.line_hollow("2", "4", "0x80a033", "Bounces", "10");//g.line_dot("5", "5", "0x006699");//将链接对象添加到图形对象上g.set_links(links);//设置X轴座标// label each point with its valueList<String> labels = new ArrayList<String>();labels.add("一月");labels.add("二月");labels.add("三月");labels.add("四月");labels.add("五月");labels.add("六月");labels.add("七月");labels.add("八月");labels.add("九月");labels.add("十月");labels.add("十一月");labels.add("十二月");//设置X轴属性g.set_x_labels(labels);g.set_x_label_style("12", "#FF0000", 0, 2, "");g.set_x_legend("Open Flash Chart Demo", 12, "#736AFF");// set the Y max//设置y轴属性g.set_y_max(60);//设置最大长度// label every 20 (0,20,40,60)g.y_label_steps(6);//设置步长%><%=g.render()%>//输出图形</body>chart-data-pie.jsp<body><%//创建图形对象Graph g = new Graph();List<String> data = new ArrayList<String>();List<String> labels = new ArrayList<String>();List<String> links = new ArrayList<String>();List<String> colors = new ArrayList<String>();//生成随机数据int max = 100;for(int i = 0; i < 3; i++) {double tmp = Math.random() * max;DecimalFormat format = new DecimalFormat("#.00");data.add(format.format(tmp));//设置格式化的数据labels.add("商品" + (i+1));//设置标签links.add("chart3.jsp?id=" + i);//设置各块图形的链接}//设置标题g.title("统计图-来自JSP", "{font-size: 26px;}");//设置饼图属性g.pie(60, "#505050", "{font-size: 12px; color: #404040;}");g.pie_values(data, labels, links);//设置各图形的颜色colors.add("#d01f3c");colors.add("#356aa0");colors.add("#C79810");g.pie_slice_colours(colors);//设置单位g.set_tool_tip("#val# ,元<br>");%><%=g.render()%>//输出图形</body>显示文件:chart.jsp<body><%//取URLString url = request.getProtocol().substring(0, 4).toLowerCase() + "://" + request.getRemoteHost() + ":" + request.getLocalPort() +request.getContextPath();String width = "500";String height = "350";%><br/><center><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"codebase="/pub/shockwave/cabs/fla sh/swflash.cab#version=8,0,0,0"width="<%=width%>" height="<%=height%>" id="ie_chart"align="middle"><param name="allowScriptAccess" value="always" /><param name="movie"value="<%=url%>/open-flash-chart.swf?width=500&height=250&data=<% =url%>/chart-data-line.jsp" />//设置数据文件url<param name="quality" value="high" /><param name="bgcolor" value="#FFFFFF" />//设置数据文件url<embedsrc="<%=url%>/open-flash-chart.swf?data=<%=url%>/chart-data-line.jsp" quality="high"bgcolor="#FFFFFF" width="<%=width%>" height="<%=height%>"name="chart" align="middle" allowScriptAccess="always"type="application/x-shockwave-flash"pluginspage="/go/getflashplayer"id="chart" /></object>&nbsp;&nbsp;&nbsp;&nbsp;<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"codebase="/pub/shockwave/cabs/fla sh/swflash.cab#version=8,0,0,0"width="<%=width%>" height="<%=height%>" id="ie_chart"align="middle"><param name="allowScriptAccess" value="always" /><param name="movie"value="<%=url%>/open-flash-chart.swf?width=500&height=250&data=<% =url%>/chart-data-pie.jsp" />//设置数据文件url<param name="quality" value="high" /><param name="bgcolor" value="#FFFFFF" />//设置数据文件url<embedsrc="<%=url%>/open-flash-chart.swf?data=<%=url%>/chart-data-pie.jsp" quality="high"bgcolor="#FFFFFF" width="<%=width%>" height="<%=height%>"name="chart" align="middle" allowScriptAccess="always"type="application/x-shockwave-flash"pluginspage="/go/getflashplayer"id="chart" /></object></center></body>Servlet方式:数据文件:ChartRenderServlet.javapublic class ChartRenderServlet extends HttpServlet {private static final long serialVersionUID = -7442075906889560871L;public void init(){System.out.println("init");}//flash取数据时,走的是doGet方法public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {this.doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {int max = 50;List<String> data = new ArrayList<String>();List<String> data2 = new ArrayList<String>();//生成随机数据for(int i = 0; i < 12; i++) {data.add(Double.toString(Math.random() * max));data2.add(Double.toString(Math.random() * max / 2));}//创建图形对象Graph g = new Graph();// Spoon sales, March 2007//设置标题g.title("Servlet", "{font-size: 25px;}");g.set_data(data);g.set_data(data2);//设置折线属性g.line(2, "0x9933CC", "Page views", 10, 2);g.line_hollow("2", "4", "0x80a033", "Bounces", "10");//设置标签// label each point with its valueList<String> labels = new ArrayList<String>();labels.add("a");labels.add("b");labels.add("c");labels.add("d");labels.add("e");labels.add("f");labels.add("g");labels.add("h");labels.add("i");labels.add("j");labels.add("k");labels.add("l");//设置X轴属性g.set_x_labels(labels);g.set_x_label_style("12", "#FF0000", 0, 2, "");g.set_x_legend("Open Flash Chart Demo", 12, "#736AFF");//设置Y轴属性// set the Y maxg.set_y_max(60);// label every 20 (0,20,40,60)g.y_label_steps(6);//设置步长response.setCharacterEncoding("utf-8");//设置字符集,在项目中使用utf-8页面不会出现乱码response.getWriter().write(g.render());//输出图形}}显示文件:chart2.jsp<body><%String url = request.getProtocol().substring(0, 4).toLowerCase() + "://" + request.getRemoteHost() + ":" + request.getLocalPort() +request.getContextPath();int width = 500;int height = 250;%><br/><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"codebase="/pub/shockwave/cabs/fla sh/swflash.cab#version=8,0,0,0"width="<%=width%>" height="<%=height%>" id="ie_chart"align="middle"><!-- 如果你要让图标支持JS或者外部连接,你需要把他设置成“always”,默认sameDomain,不支持这些 --><param name="allowScriptAccess" value="sameDomain" />//设置数据来源url<param name="movie"value="<%=url%>/open-flash-chart.swf?width=<%=width%>&height=<%=h eight%>&data=<%=url%>/ChartRenderServlet" /><param name="quality" value="high" /><param name="bgcolor" value="#FFFFFF" />//设置数据来源url<embedsrc="<%=url%>/open-flash-chart.swf?data=<%=url%>/ChartRenderServlet" quality="high"bgcolor="#FFFFFF" width="<%=width%>" height="<%=height%>"name="chart" align="middle" allowScriptAccess="sameDomain"type="application/x-shockwave-flash"pluginspage="/go/getflashplayer"id="chart" /></object></body>第三方组件:OFC4J该组件对OpenFlashChart实现了简单的包装,提供了丰富多样的展现形式。

FLASH实例-通用图片浏览(16:9缩略图)

FLASH实例-通用图片浏览(16:9缩略图)

FLASH实例-通用图片浏览(16:9缩略图)此实例在《FLASH实例-通用图片浏览(16:9)》基础上增加了滚动缩略图。

点击滚动缩略图中的图片,快速浏览该图片,返回自动浏览,鼠标指向大图的右下方“自动浏览”即可。

滚动缩略图的滚动速度由二个因素决定:1、鼠标指向滚动缩略图,距离中心点越远,滚动速度越快。

2、通过参数设定确定整体移动速度。

滚动缩略图的滚动方向与鼠标指向滚动缩略图的方向相反。

《FLASH实例-通用图片浏览(16:9缩略图)》的使用方法请阅读《FLASH实例-通用图片浏览(16:9)》。

不同之处:一、博客添加“图片浏览(16:9缩略图)”的代码:<EMBED src= width=690 height=495 type=application/x-shockwave-flash QUALITY="high" WMODE="transparent" FLASHVARS="tpt=图片网址相同部分&tp=图片网址(或图片网址不同部分)&tpw=图片网址不同部分简写&tpn=图片名称(或者tpnj=统一图片的名称)&cc=图片尺寸&qhfs=切换方法&txbh=特效编号&mp3=mp3网址&mp3n=音乐名称&lrc=LRC歌词&fmdz=封面网址&fmzs=封面停留帧数&xblys=下边栏颜色&xsd=缩略图移动速度"></EMBED>代码说明:是图片浏览动画的SWF网址,这网址是固定不变的。

使用这网址,如果我有修改图片浏览动画功能,你的图片浏览动画将会同步、实时更新。

图片浏览动画宽度690,高度495,如需要缩放,务必按比例缩放。

二、“图片浏览(16:9缩略图)”参数说明:xsd=缩略图移动速度缩略图移动速度参数的数值大,移动慢。

如何在FlowJo中导出图片,生成图片报告及导出高质量可发表的图片

如何在FlowJo中导出图片,生成图片报告及导出高质量可发表的图片

流式数据分‎析完毕之后‎,我们需要导‎出流式图片‎,用于学术报‎告及实验记‎录等,我将在这篇‎博文中说明‎如何在Fl‎o wJo里‎导出图片及‎生成图片报‎告,同时我也将‎在此讲解在‎F lowJ‎o中怎样导‎出用于发表‎文章高质量‎的图片。

一、FlowJ‎o里的图片‎导出1. 直接从图形‎窗口导出1.1 在图形窗口‎的“文件”菜单栏中选‎择“另存为”或者“Expor‎t To App”1.2 选择图片文‎件存放的路‎径,给文件重命‎名,以及更改图‎片格式备注:通常我们不‎是很建议用‎这种方式保‎存图片,一个原因是‎各个图片都‎要单个保存‎,非常的不方‎便,我们建议你‎采用在布局‎页里编辑再‎导出图片的‎方式。

2. 在布局页导‎出图片将需要导出‎的图片拖到‎布局页里进‎行导出,请参考第二‎部分内容(在Flow‎J o中生成‎报告)。

3. 在偏好设置‎中更改导出‎图片的格式‎3.1 可导出的图‎片格式有6‎种:PNG,JPG, GIF, SVG, EMF, PDF3.2 默认的图片‎格式为PN‎G,如果需要更‎改,到“编辑”菜单栏里选‎择“偏好设置>文件格式”,在“布局编辑器‎”的输出格式‎类型中选择‎需要的格式‎,如下图所示‎二、在Flow‎J o中生成‎报告1. 在布局页生‎成报告的步‎骤:1.1 打开布局编‎辑器:点击布局编‎辑器按钮,或者到“窗口”菜单栏里选‎择“打开布局编‎辑器”1.2 在工作台中‎,单击选中需‎要输出的项‎目,并将其拖到‎布局编辑器‎1.3 对布局编辑‎器中的图形‎进行排版:可以通过布‎局编辑器“排齐”菜单中的选‎项进行“顶端对齐”和“底端对齐”等操作1.4 到布局编辑‎器“文件”菜单栏中选‎择“Scale‎To Page”,将所有图片‎都放到同一‎个页面里,避免出现分‎页的情况1.5 保存并导出‎图片:点击“保存”按钮,或者到布局‎编辑器的“文件”菜单栏选择‎“图片另存为‎”2. 布局页可生‎成报告的格‎式2.1 点击Bat‎c h按钮进‎行批处理2.2 可以将批处‎理的结果导‎出到Flo‎w Jo、Power‎P oint‎、打印机、PDF文件‎、Web 页面‎和Quic‎k time‎动画视频中‎三、生成高质量‎可发表图片‎的方法及建‎议建议将图片‎保存为PD‎F格式,再在专业的‎图片编辑器‎如Phot‎o shop‎或者Ill‎u stra‎t or里面‎进行编辑,再输出为杂‎志要求的文‎件格式,一般为JP‎G,现在也有杂‎志倾向于接‎收PDF图‎片。

Flash中国地图开放源码

Flash中国地图开放源码

Flash中国地图开放源码Flash中国地图,以Object为数据源,便于实现基于中国地图的可视化项⽬。

特征:swc,便于导⼊到Flex项⽬中数据源为Object,⽐XML更⽅便数据驱动的地图块颜⾊和Hover颜⾊可配置是否显⽰省份名快速⽅便Code License: Apache 2.0Author: ComingX JingleDownload:使⽤⽅法:创建Flex项⽬,拷贝ChinaMap.swc⾄项⽬libs⽬录下map = new Map()1<?xml version="1.0" encoding="utf-8"?>2<!--3* Business License4*5* Copyright 2013. All rights reserved.6*7* @Author: Jingle8* @Email: jingdongemail@9* @Created date: 2013-6-2710-->11<s:Application xmlns:fx="/mxml/2009"12 xmlns:s="library:///flex/spark"13 xmlns:mx="library:///flex/mx" minWidth="955" minHeight="600"14 creationComplete="application1_creationCompleteHandler(event)"15>16<fx:Declarations>17<!-- 将⾮可视元素(例如服务、值对象)放在此处 -->18</fx:Declarations>19<fx:Script>20<![CDATA[21 import ingx.jingle.chinamap.domains.InitData;2223 import mx.events.FlexEvent;24 import mx.flash.UIMovieClip;25 private var map:UIMovieClip;2627 protected function application1_creationCompleteHandler(event:FlexEvent):void28 {29 map = new Map();30 test.addElement(map);31 var initData:InitData = new InitData();32 initData.isShowProvinceName = false;33 initData.provinceDataArray = [34 {"id":11,"name":"beijing","color":0xff4400,"hoverColor":0xff0000},35 {"id":12,"name":"tianjin","color":0xccffcc,"hoverColor":0xff0000},36 {"id":13,"name":"hebei","color":0xbbffbb,"hoverColor":0xffff00},37 {"id":14,"name":"shanxi","color":0xffee00,"hoverColor":0xff2200},38 {"id":15,"name":"neimenggu","color":0xaaffaa,"hoverColor":0xff2200},39 {"id":21,"name":"liaoning","color":0xddffdd,"hoverColor":0xff2200},40 {"id":22,"name":"jilin","color":0xddffdd,"hoverColor":0xff2200},41 {"id":23,"name":"heilongjiang","color":0xddffdd,"hoverColor":0xff2200},42 {"id":31,"name":"shanghai","color":0xddffdd,"hoverColor":0xff2200},43 {"id":32,"name":"jiangsu","color":0xddffdd,"hoverColor":0xff2200},44 {"id":33,"name":"zhejiang","color":0xddffdd,"hoverColor":0xff2200},45 {"id":34,"name":"anhui","color":0xddffdd,"hoverColor":0xff2200},46 {"id":35,"name":"fujian","color":0xddffdd,"hoverColor":0xff2200},47 {"id":36,"name":"jiangxi","color":0xddffdd,"hoverColor":0xff2200},48 {"id":37,"name":"shandong","color":0xddffdd,"hoverColor":0xff2200},49 {"id":41,"name":"henan","color":0xddffdd,"hoverColor":0xff2200},50 {"id":42,"name":"hubei","color":0xddddff,"hoverColor":0xff2200},51 {"id":43,"name":"hunan","color":0xddffdd,"hoverColor":0xff2200},52 {"id":44,"name":"guangdong","color":0xddffdd,"hoverColor":0xff2200},53 {"id":45,"name":"guangxi","color":0xddeeff,"hoverColor":0xff2200},54 {"id":46,"name":"hainan","color":0xddffdd,"hoverColor":0xff2200},55 {"id":50,"name":"chongqing","color":0xddffdd,"hoverColor":0xff2200},56 {"id":51,"name":"sichuan","color":0xffffdd,"hoverColor":0xff2200},57 {"id":52,"name":"guizhou","color":0xddffdd,"hoverColor":0xff2200},58 {"id":53,"name":"yunnan","color":0xddffdd,"hoverColor":0xff2200},59 {"id":54,"name":"xizang","color":0xddeffe,"hoverColor":0xff2200},60 {"id":61,"name":"shannxi","color":0xddffdd,"hoverColor":0xff2200},61 {"id":62,"name":"gansu","color":0xddffdd,"hoverColor":0xff2200},62 {"id":63,"name":"qinghai","color":0xddffdd,"hoverColor":0xff2200},63 {"id":64,"name":"ningxia","color":0xddffdd,"hoverColor":0xff2200},64 {"id":65,"name":"xinjiang","color":0xddffdd,"hoverColor":0xff2200},65 {"id":71,"name":"taiwan","color":0xddffdd,"hoverColor":0xff2200},66 {"id":81,"name":"xianggang","color":0xddffdd,"hoverColor":0xff2200},67 {"id":82,"name":"aomen","color":0xddffdd,"hoverColor":0xff2200}68 ];69 map.init(initData);70 }7172]]>73</fx:Script>74<s:Group id="test">7576</s:Group>77</s:Application>Demo为Flash build 4.5的project直接导⼊即可。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

这几天用OpenFlashChart这个开源组件做一些图形呈现方面的工作(OFC基于LGPL开源协议)。

由于OFC对JSON支持的非常好,所以用它加载数据非常方便。

同时它本身的配置就是JSON格式,这就可以方便的用JS对它的行为进行动态控制。

但熟悉OFC的朋友都知道,它本身并没有提供直接导出图形的功能。

仅在右键菜单中预留了一个"Save Image Locally"的接口。

其实,在OFC内部已经实现了几个与图形有关的辅助方法。

下面对本人最近实现的OFC导出图形做一个记录(部分代码参考了互联网)。

项目中用到的最新版本的OFC下载地址:/projects/openflashchart/files/首先,由于添加Flash到页面是一个非常普遍的操作。

先封装一个通用的方法:1/*2* 功能:在指定容器中添加flash3* 参数:4* file swf文件路径5* container 容器ID6* width swf宽度7* height swf高度8* key 唯一编号9* 返回:唯一标识(flashID标识,可选,如果未设置将自动生成一个)10*/11function addswf(file, container, width, height, key) {12var id = "flash_" + Math.random();13if (key) {14 id = key;15 }16else {17 key = id;18 }19var url = file + "?key=" + id;20var swfVersionStr = "0.0.0";21var xiSwfUrlStr = url;22var flashvars = {};23var params = {};24 params.quality = "high";25 params.bgcolor = "#fefefe";26 params.wmode = "transparent";27 params.allowscriptaccess = "sameDomain";28 params.allowfullscreen = "true";29var attributes = {};30 attributes.id = id;31 = id;32 attributes.align = "middle";33 swfobject.embedSWF(34 url, container,35 width, height,36 swfVersionStr, xiSwfUrlStr,37 flashvars, params, attributes);38return key;39};然后我们就可以在页面中调用:40addswf("/flash/OFC.swf?random=" + Math.random(), "chartContainer", "800", 300, "OFC_obj");值得注意的是,在上面的调用代码中,在OFC的路径后面追加了一个random参数,它是一个随机值。

这样就强制让浏览器在载入页面的时候重新加载OFC.swf,而不是从缓存中读取。

实践发现,许多OFC在IE下面表现的奇怪问题,都是因为这个缓存读取导致。

OFC添加至页面后,需要在JS中提供下面这个方法:41function open_flash_chart_data() {42//这里返回OFC实例数据43}open_flash_chart_data方法会由OFC自动调用。

经本人测试,如果没有提供上述方法,页面一般会有如下提示:44Open Flash Chart45IO ERROR46Loading test data47Error #2032另外,如果OFC需要呈现的数据不止一项的话,通常需要让每一项呈现不同的颜色:48//随机颜色生成49function randomColor() {50return'#' + (Math.random() * 0xffffff).toFixed(0);51}然后,可以直接用代码控制每一项的颜色,如下所示(线性图):52var item_bar = {53"type": "bar_glass",54"alpha": 0.5,55"colour": "",56"on-show": { "type": "grow-up" },57"text": "",58"font-size": 12,59"tip": "",60"values": []61};62item_bar.colour = randomColor();63//...更多配置以上是OFC需要注意的地方。

参考OFC下载包里面data-files文件夹下的示例,可以很容易实现以下图形效果:再放一张线性图:在图形上右击,可以看到OFC预留的图片保存入口:此时,点击“Save Image Locally”,是没有任何反应的。

再在页面<body>标签中添加以下JS代码:1<script type="text/javascript">2function save_image() {3 alert('hello pipe');4 }5</script>现在,再次点击“Save Image Locally”,可以看到上述方法已调用:和open_flash_chart_data方法一样,save_image也是OFC对外公开的方法之一。

接下来,继续完善相关JS代码:6<script type="text/javascript">7 OFC = {};8 OFC.jquery = {9 version: function(src) { return$('#'+ src)[0].get_version(); },10 rasterize: function (src, dst) { $('#' +dst).replaceWith(OFC.jquery.image(src)); },11 image: function(src) { return"<img src='data:image/png;base64,"+ $('#' + src)[0].get_img_binary() + "' />"; },12 popup: function (src) {13var img_win = window.open('', 'Image');14with (img_win.document) {15 write('<html><head><title>图片导出</title></head><body><div style="font-size:12px;border-bottom:1px solidgray;padding-bottom:5px;">请右击下面图片,选择另存为:</div>'+ OFC.jquery.image(src) + '</body></html>');16 }17 img_win.document.close();18 }19 };20if (typeof (Control == "undefined")) {21var Control = { OFC: OFC.jquery };22 }23function save_image() {24 OFC.jquery.popup('OFC_obj');25 }26 </script>上面是OFC导出图形的核心代码:构建了OFC对象,并在它的jquery子对象中公开了几个字面量。

其中:27version :返回当前加载的OFC的版本号,同样调用了OFC内置的get_version()方法。

2829rasterize :实际就是将图形内容填充到页面中指定的div标签中。

如果在页面中提供了导出图形的按钮,而不是在OFC上右键,就可以由按钮直接调用这个方法。

3031image :调用OFC内置的get_img_binary方法获取图形流,并渲染到一个<img>标签中返回。

3233popup :如果需要在新页面中呈现导出的图形,可以调用这个方法。

它内部调用了image,并对新页面进行了一些简单的初始化。

需要注意的是,save_image方法中,OFC.jquery.popup接收的参数"OFC_obj",必须和之前添加OFC到页面时调用的方法addswf(),指定的唯一编号一致。

进行到这一步,当在OFC上右键,单击“Save Image Locally”,就会弹出一个新页面,显示需要导出的图形。

如下所示:接下来实现在页面上单击“导出图形”按钮,实现OFC图形化的功能。

代码很简单,添加导出按钮,调用OFC.jquery.rasterize方法即可:34<input type="button"name="btncopy"onclick="OFC.jquery.rasterize('OFC_obj', 'chartImage')"style="float: right;"value="导出图片"/>OFC.jquery.rasterize 接收两个参数:每一个参数为需要渲染的源Flash编号,和之前向页面中添加OFC时调用的方法addswf()中指定的唯一编号一致,也就是"OFC_obj";第二个参数为图片显示的容器ID,这里指定为"chartImage"。

相关文档
最新文档