FlexChart使用教程.docx
- 文档编号:7661714
- 上传时间:2023-01-25
- 格式:DOCX
- 页数:19
- 大小:634.91KB
FlexChart使用教程.docx
《FlexChart使用教程.docx》由会员分享,可在线阅读,更多相关《FlexChart使用教程.docx(19页珍藏版)》请在冰豆网上搜索。
FlexChart使用教程
FlexChart使用教程
版本
作者
审核人
创建日期
备注
目录
1准备阶段3
2开发阶段3
1准备阶段
1.1下载并安装FlexBuild3或FlexEclipse插件。
1.1.1.1.1FlexBuild3自带FlexSdk。
这是Flex的编译器,相当于Java平台的JDK。
FlexBuild3仅仅是一个集成开发环境。
2开发阶段
2.1创建工程:
New->FlexProject如图
在NewFlexProject对话框中录入Projectname、Projectlocation选择ApplicationType如图
对于简单的应用来说后面没什么需要设置的,可以直接选择“Finish”。
2.2
认识Flex文件:
FlexBuild3为我们创建了以下文件:
FlexDemo是工程的根目录,根目录下包含bin-debug、html-template、libs和src。
其中src是存放源文件的目录,里面保存的是*.mxml、*.as、*.css等文件。
*.mxml是一种xml格式的文件,里面包含标签、样式和脚本用来生成*.swf程序。
*.as是ActionScript的脚本文件,这是一种面向对象的脚本语言,类似于Java或JavaScript。
bin-debug是编译生成的*.swf默认存放的目录。
其他目录的作用不属于本教程讲解范围。
2.3认识开发模式:
使用FlexBuild3开发Flex应用程序时IDE提供了两种开发模式,分别是设计模式和代码编写模式。
两种模式通过编辑器上方的“Source”和“Design”按钮切换。
设计模式就是“所见即所得”的开发模式,开发人员在设计模式下可以直接在设计面板上添加控件和控制UI的布局。
设计视图左下是Flex的可视控件可以直接拖到设计面板上面。
右侧可以调整属性。
代码编写模式就是开发人员通过标签和脚本来控制布局和控件。
2.4开发实例:
在正式开发前先准备好测试数据,在src目录下新建一个data.xml文件。
xmlversion="1.0"encoding="utf-8"?
>
2.5饼图
打开自动生成的FlexDemo.mxml文件,选择设计模式。
在可视控件中打开文件Layout目录,将Panel控件拖到设计面板上面。
在右侧的Layout面板下将layout选项选为absolute。
这个容器中的控件就可以采用绝对定位的方式进行布局。
接着从Charts目录下拖一个PieChart控件到Panel容器上。
修改ID和Serieselements属性,ID是PieChart控件的ID属性,pieSvs是PieChart子标签的名称。
点击OK可以看到饼图的控件已经包含到Panel容器里了,但页面布局惨不忍睹。
可以用鼠标调整页面布局。
用Ctrl+F11可以运行这个Flex程序。
这时你会发现,页面上只有Panel容器却没有图。
这是因为我们还没有将图和数据绑定在起来,现在打开代码编辑模式。
xmlversion="1.0"encoding="utf-8"?
>
Applicationxmlns: mx=layout="absolute"> Panelx="10"y="10"width="519"height="440"layout="absolute"> PieChartx="0"y="0"id="pieChart"> series> PieSeriesdisplayName="pieSvs"field=""/> series> PieChart> LegenddataProvider="{pieChart}"x="414"y="31"/> Panel> Application> 修改代码如下: xmlversion="1.0"encoding="utf-8"? > Applicationxmlns: mx=layout="absolute"creationComplete="{request.send()}"> HTTPServiceid="request"url="data.xml"/> Panelx="10"y="10"width="519"height="440"layout="absolute"> PieChartx="0"y="0"id="pieChart"dataProvider="{request.lastResult.data.item}"> series> PieSeriesdisplayName="pieSvs"field="value"nameField="lable"/> series> PieChart> LegenddataProvider="{pieChart}"x="414"y="31"/> Panel> Application> 这样的修改有什么意义呢? 我们先增加了一个HTTPService标签,id是request。 这是一个http请求标签,URL表示所请求的数据的地址,该地址会返回xml格式的数据。 这里我们实际请求的是先前我们编写的data.xml文件。 然后我们在Application标签的creationComplete事件中调用了HTTPService的send方法。 这表示应用每次加载的时候都会调用这个方法,发出请求并且获取数据。 第三步我们在PieChart标签中加入dataProvider属性,这个属性将请求的数据和控件绑定。 最后一步我们在PieSeries标签里加上field和nameField两个属性。 Field绑定显示的数据,nameField绑定数据的标注。 xmlversion="1.0"encoding="utf-8"? > Applicationxmlns: mx=layout="absolute"creationComplete="{request.send()}"> HTTPServiceid="request"url="data.xml"/> Panelx="10"y="10"width="519"height="440"layout="absolute"> PieChartx="0"y="0"id="pieChart"dataProvider="{request.lastResult.data.item}"> series> PieSeriesdisplayName="pieSvs"field="value"nameField="lable"/> series> PieChart> LegenddataProvider="{pieChart}"x="414"y="31"/> Panel> Application> 我们已经完成了一个最基本的饼图。 如果你发现实际的布局和设计模式下的不完全一样,而且怎么调整都还有问题。 请按前面讲过的将Panel容器的Layout属性调整为absolute。 此外Flex还有许多功能可以将图调整的更美观,内容更详细。 在PieChart标签中添加showDataTips="true"属性,当鼠标移动到饼图上某个色块时就会显示这个色块的详细信息。 在PieSeries标签中添加labelPosition="callout"labelField="lable"属性,在饼图外面会显示标注信息。 是不是觉得标注的线条很难看,字体也太小了? 在PieChart标签加上fontSize=”14”属性试试,字变大了。 新加入一个Stroke标签如下: Strokeid="s1"color="black"alpha=".4"weight="2"/>。 然后在PieSeries标签里加入calloutStroke=”{s1}”引用这个Stroke,刷新页面看一下。 不喜欢饼图的颜色吗? 我们马上就换掉它。 xmlversion="1.0"encoding="utf-8"? > Applicationxmlns: mx=layout="absolute"creationComplete="{request.send()}"> HTTPServiceid="request"url="data.xml"/> SolidColorid="sc1"color="blue"alpha=".9"/> SolidColorid="sc2"color="red"alpha=".9"/> SolidColorid="sc3"color="yellow"alpha=".9"/> SolidColorid="sc4"color="green"alpha=".9"/> SolidColorid="sc5"color="black"alpha=".9"/> Strokeid="s1"color="black"alpha=".4"weight="2"/> Panelx="10"y="10"width="519"height="440"layout="absolute"> PieChartfontSize="14"showDataTips="true"x="0"y="0"id="pieChart"dataProvider="{request.lastResult.data.item}"> series> PieSeriescalloutStroke="{s1}"labelPosition="callout"labelField="lable"displayName="pieSvs"field="value"nameField="lable"fills="{[sc1,sc2,sc3,sc4,sc5]}"/> series> PieChart> LegenddataProvider="{pieChart}"x="414"y="31"/> Panel> Application> 其他样式调整功能,在附带的例子(PieChart.mxml)中有用到。 2.6曲线图 接下来我们加上曲线图,还是先得到一个Panel容器。 然后拖一个LineChart控件到Panel上。 与饼图不同的是曲线图的Serieselements可会有多个,每个series都对应了一条曲线。 调整布局后,打开代码编辑模式。 在LineChart标签里加上dataProvider="{request.lastResult.data.item}"属性,将两个LineSeries标签中的yField属性分别绑定到value,value2。 LineSeriesdisplayName="svs1"yField="value"/> LineSeriesdisplayName="svs2"yField="value2"/> 运行程序如下图: 仔细看图会发现,在纵轴上的数据没有有问题。 但与之对应的横轴是0、1、2、3、4,这些数字对我们没有意义。 怎么才能让横轴上显示我们需要的数据呢? 既然纵轴上的值对应的属性是yField那么横轴上用xField试一下如何。 给第一个svs1标签加上属性xField=”lable”后刷新页面,发现svs1没了。 很显然,虽然确实有xField这个属性,但这样做不行。 这时我们可以在-对LineChart标签里加上 horizontalAxis> CategoryAxiscategoryField="lable"/> horizontalAxis> 这样的代码。 然后刷新页面,我们看到了我们想要的。 曲线图设置颜色与饼图不同,使用的是Stroke标签,与Series的lineStroke属性绑定。 Strokeid="l1"color="blue"alpha=".7"weight="2"/> Strokeid="l2"color="red"alpha=".7"weight="2"/> LineSeriesdisplayName="svs1"yField="value"lineStroke="{l1}"/> LineSeriesdisplayName="svs2"yField="value2"lineStroke="{l2}"/> 看下面的图: 接着在svs1中加上form=”curve”,刷新页面看看有什么不同。 很明显,svs1的线条变得柔和了。 如果不加这个属性form取的是默认值segment。 线条很硬朗,form还有一些其他的值,感兴趣的可以自己试一下。 曲线图的讲解到这里基本结束。 2.7柱状图 最后我们做一个柱状图,还是先准备一个Panel,然后拖一个ColumnChart到Panel上。 柱状图的做法与曲线图完全一样,参照曲线图的做法我们就能生成一张柱状图。 柱状图与曲线图的主要不同体现在颜色的填充上,柱状图填充颜色也是使用SolidColor,这个与饼图相同。 但不同的是饼图填充的是颜色序列,一个Series中会填充多个颜色,而柱状图每个Series只能填充一种颜色。 ColumnSeriesdisplayName="svs1"yField="value"fill="{sc1}"/> ColumnSeriesdisplayName="svs2"yField="value2"fill="{sc2}"/> 另外BarChart与ColumnChart同样都是柱状图,用法完全一样。 但两种图有什么区别,感兴趣的也可以尝试一下。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- FlexChart 使用 教程
![提示](https://static.bdocx.com/images/bang_tan.gif)