FlexChart使用教程Word格式.docx

FlexChart使用教程Word格式.docx

《FlexChart使用教程Word格式.docx》由会员分享，可在线阅读，更多相关《FlexChart使用教程Word格式.docx（19页珍藏版）》请在冰豆网上搜索。

认识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"

?

>

data>

item>

<

lable>

蓝色<

/lable>

value>

3<

/value>

value2>

2<

/value2>

<

/item>

红色<

5<

1<

<

黄色<

4<

绿色<

6<

黑色<

/data>

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容器却没有图。

这是因为我们还没有将图和数据绑定在起来，现在打开代码编辑模式。

mx:

Applicationxmlns:

mx=layout="

absolute"

Panelx="

10"

y="

width="

519"

height="

440"

layout="

PieChartx="

0"

id="

pieChart"

<

series>

PieSeriesdisplayName="

pieSvs"

field="

"

/>

/mx:

PieChart>

LegenddataProvider="

{pieChart}"

x="

414"

31"

Panel>

Application>

修改代码如下：

creationComplete="

{request.send（）}"

HTTPServiceid="

request"

url="

data.xml"

/>

dataProvider="

{request.lastResult.data.item}"

value"

nameField="

lable"

这样的修改有什么意义呢？

我们先增加了一个HTTPService标签，id是request。

这是一个http请求标签，URL表示所请求的数据的地址，该地址会返回xml格式的数据。

这里我们实际请求的是先前我们编写的data.xml文件。

然后我们在Application标签的creationComplete事件中调用了HTTPService的send方法。

这表示应用每次加载的时候都会调用这个方法，发出请求并且获取数据。

第三步我们在PieChart标签中加入dataProvider属性，这个属性将请求的数据和控件绑定。

最后一步我们在PieSeries标签里加上field和nameField两个属性。

Field绑定显示的数据，nameField绑定数据的标注。

我们已经完成了一个最基本的饼图。

如果你发现实际的布局和设计模式下的不完全一样，而且怎么调整都还有问题。

请按前面讲过的将Panel容器的Layout属性调整为absolute。

此外Flex还有许多功能可以将图调整的更美观，内容更详细。

在PieChart标签中添加showDataTips="

true"

属性，当鼠标移动到饼图上某个色块时就会显示这个色块的详细信息。

在PieSeries标签中添加labelPosition="

callout"

labelField="

属性，在饼图外面会显示标注信息。

是不是觉得标注的线条很难看，字体也太小了？

在PieChart标签加上fontSize=”14”属性试试，字变大了。

新加入一个Stroke标签如下：

Strokeid="

s1"

color="

black"

alpha="

.4"

weight="

2"

。

然后在PieSeries标签里加入calloutStroke=”{s1}”引用这个Stroke，刷新页面看一下。

不喜欢饼图的颜色吗？

我们马上就换掉它。

SolidColorid="

sc1"

blue"

.9"

sc2"

red"

sc3"

yellow"

sc4"

green"

sc5"

PieChartfontSize="

14"

showDataTips="

PieSeriescalloutStroke="

{s1}"

labelPosition="

displayName="

fills="

{[sc1,sc2,sc3,sc4,sc5]}"

其他样式调整功能，在附带的例子（PieChart.mxml）中有用到。

2.6曲线图

接下来我们加上曲线图，还是先得到一个Panel容器。

然后拖一个LineChart控件到Panel上。

与饼图不同的是曲线图的Serieselements可会有多个，每个series都对应了一条曲线。

调整布局后，打开代码编辑模式。

在LineChart标签里加上dataProvider="

属性，将两个LineSeries标签中的yField属性分别绑定到value,value2。

LineSeriesdisplayName="

svs1"

yField="

svs2"

value2"

运行程序如下图：

仔细看图会发现，在纵轴上的数据没有有问题。

但与之对应的横轴是0、1、2、3、4,这些数字对我们没有意义。

怎么才能让横轴上显示我们需要的数据呢？

既然纵轴上的值对应的属性是yField那么横轴上用xField试一下如何。

给第一个svs1标签加上属性xField=”lable”后刷新页面，发现svs1没了。

很显然，虽然确实有xField这个属性，但这样做不行。

这时我们可以在-对LineChart标签里加上

horizontalAxis>

CategoryAxiscategoryField="

这样的代码。

然后刷新页面，我们看到了我们想要的。

曲线图设置颜色与饼图不同，使用的是Stroke标签，与Series的lineStroke属性绑定。

l1"

.7"

<

l2"

lineStroke="

{l1}"

{l2}"

看下面的图：

接着在svs1中加上form=”curve”,刷新页面看看有什么不同。

很明显，svs1的线条变得柔和了。

如果不加这个属性form取的是默认值segment。

线条很硬朗，form还有一些其他的值，感兴趣的可以自己试一下。

曲线图的讲解到这里基本结束。

2.7柱状图

最后我们做一个柱状图，还是先准备一个Panel,然后拖一个ColumnChart到Panel上。

柱状图的做法与曲线图完全一样，参照曲线图的做法我们就能生成一张柱状图。

柱状图与曲线图的主要不同体现在颜色的填充上,柱状图填充颜色也是使用SolidColor，这个与饼图相同。

但不同的是饼图填充的是颜色序列，一个Series中会填充多个颜色，而柱状图每个Series只能填充一种颜色。

ColumnSeriesdisplayName="

fill="

{sc1}"

{sc2}"

另外BarChart与ColumnChart同样都是柱状图，用法完全一样。

但两种图有什么区别，感兴趣的也可以尝试一下。