Flex3 Chart学习笔记:PieChart(饼图)
接触Flex3有一段时间了,但是一直没有时间学习Flex 的Chart这部分。今天正好有空,就摸索着做了个小例子,功能很简单,先看看截图:
下面是代码(讲解在注释中):
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" backgroundGradientColors="[#F3A1A1, #B3C860]"
width="709" height="488" creationComplete="initApp()" backgroundGradientAlphas="[1.0, 1.0]">
<mx:Script>
<![CDATA[
import mx.events.ItemClickEvent;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
[Bindable]
var ac:ArrayCollection;
[Bindable]
var acNew:ArrayCollection;
//初始化函数
function initApp():void
{
//在程序初始化时,定义数组,作为饼图的初始值
ac=new ArrayCollection([
{name: "value1",num: 10},
{name: "value2",num: 10},
{name: "value3",num: 10}
]);
//把ac作为饼图的数据源
piechart1.dataProvider=ac;
}
//取得当前三个滑杆的值,生成数组,然后重新作为饼图的数据源。注:三个滑杆都调用该函数
function test():void
{
acNew=new ArrayCollection([
{name: "value1",num: hs1.value},
{name: "value2",num: hs2.value},
{name: "value3",num: hs3.value}
]);
piechart1.dataProvider=acNew;
}
//显示标签时的回调函数
private function showLabel(data:Object, field:String, index:Number, percentValue:Number):String {
//返回的值,就是饼图要显示的标签。这里用当前滑杆的值(data.num)除以三个滑杆当前值的总和,得出百分比
//注:data.num表示的就是PieSeries组件对象的field属性,也就是当前滑杆的值
return int(data.num/(hs1.value+hs2.value+hs3.value)*100) + "%";
}
]]>
</mx:Script>
<mx:PieChart x="10" y="78" id="piechart1" dataProvider="{ac}">
<mx:series>
<!--PieSeries组件的各个属性:-->
<!--labelFunction属性:指定显示标签时的回调函数,这里指定的是showLabel函数-->
<!--nameField属性:指定饼图各部分名称与所绑定的数组对应的字段,本例中对应数组的name字段,也就是value1、value2和value3-->
<!--field属性:指定饼图各部分值与所绑定的数组对应的字段,本例中对应数组的num字段,也就是hs1.value、hs2.value和hs3.value-->
<mx:PieSeries displayName="Series 1" labelFunction="showLabel" labelPosition="outside" nameField="name" field="num"/>
</mx:series>
</mx:PieChart>
<mx:Legend dataProvider="{piechart1}"/>
<!--HSlider组件的主要属性:-->
<!--liveDragging属性:布尔型。HSlider的change事件是当移动滑杆之后触发的,如果想要移动滑杆的时候就不断的触发,可以将该属性值设置为true,默认为false-->
<!--snapInterval属性:数值型。默认移动滑杆时,滑杆的当前值精确到小数点后两位。其实我们通常没有必要用这么精确的值。可以通过设置该属性,来决定移动滑杆时,每移动一次的间隔值。怎么感觉越说越复杂了,建议大家试验一下就明白了^_^-->
<!--tickInterval属性:数值型。滑杆上刻度的间隔值。例如:滑杆最大值是100,如果将该属性设置成50的话,就会显示3个刻度值。为什么显示3个?试一下就知道了-->
<!--minimum/maximum属性:数值型。这两个相信大家一看就明白了,设置最小值和最大值的属性。-->
<mx:HSlider x="418" y="198" id="hs1" value="10" liveDragging="true" snapInterval="1" tickInterval="25" minimum="0" maximum="100" change="test()"/>
<mx:HSlider x="418" y="313" id="hs3" value="10" liveDragging="true" snapInterval="1" tickInterval="25" minimum="0" maximum="100" change="test()"/>
<mx:HSlider x="418" y="257" id="hs2" value="10" liveDragging="true" snapInterval="1" tickInterval="25" minimum="0" maximum="100" change="test()"/>
<mx:Label x="418" y="172" text="value1:" width="58"/>
<mx:Label x="418" y="231" text="value2:" width="58"/>
<mx:Label x="418" y="287" text="value3:" width="58"/>
</mx:Application>
分享到:
相关推荐
C# PieChart饼图开发代码,先在窗体中添加panel,在添加PieChart,就可以编写出好看的饼图。
PieChart 饼图,带点击效果,可转动,附加比例图
饼形图 此Flutter软件包提供了带有精美动画的饼图小组件。 现场演示: : :laptop: 尝试现场演示 现场演示: : :laptop: 安装 在pubspec.yaml的dependencies:部分中,添加以下行: ...PieChart (dat
C# 3D 饼图 PieChart 三维 资料整理,一起分享!
flex的一个3D饼图,点击扇区可变大,pieChart信息显示为内显示。这个一个pieChart组件
iOS饼图视图 iOS饼图是一种以饼图的形式呈现信息的好工具。 默认外观具有精美的平面设计,该控件具有内置的动画功能,可以呈现,插入,删除和更新动作,并且可以完全自定义,接受颜色更改,文本和字体自定义。 全部...
使用新的grafana-cli工具从命令行安装piechart-panel: grafana-cli plugins install grafana-piechart-panel 该插件将安装到您的Grafana插件目录中; 如果安装了Grafana软件包,则默认值为/ var / lib / grafana /...
PieChart:饼状图,饼图,统计图
用LABVIEW编写的饼图显示,可以按照自定义颜色进行显示
构建饼图的步骤主要分为以下三步,还需要在项目中引入AChartEngine依赖jar包,在Manifest中添加:<activity android:name="org.achartengine.GraphicalActivity" />
Android自定义带动画的饼图PieChart
iPieChart客观的PieChart是在我学习了线性代数向量的算法之后构想的。 我发现了一个有趣的想法,那就是开始在交互式饼图控件中练习我的新知识。 到目前为止,此控件尚处于基本阶段,但任何人都可以使用它,并且可以...
amCharts(.NET版)图形报表的使用实例 带VS2010工程文件 可直接运行。 首先需要添加dll引用,然后再把相关文件放到目录里就像在项目里添加FCK编辑器...<cc1:LineChart runat="server" ID="LineChart1"></cc1:LineChart>
NULL 博文链接:https://wuxiubing.iteye.com/blog/906805
flex progressbar跳完后展示饼图,后面深入开发的话,可以后台数据库,传入参数,再跳转,显示饼图
FL Chart 一个强大的Flutter图表库,支持折线图、条形图和饼图等
var piechart = require ( 'piechart' ) ; piechart ( document . getElementById ( "piechart" ) , [ { value : 100 , color : '#800000' } , { value : 80 , color : '#5252CC' } , { value : 180 , color : '...
echarts没有三维饼图,但是有时候又需要在前端绘制三维饼图怎么办?这个时候可以考虑用threejs来实现功能。 使用示例: var cubic = new Cubic.PieChart("WebGL-output", { width: 400, height: 300, thickness: ...
一个可以显示标题和值,每个饼上有百分比的饼图,博客代码地址http://blog.csdn.net/u010053224/article/details/51799523
直接引入传入数据即可使用。 import PieChart3D from "@/components/PieChart3D" ... { name: "整租", value: 3, color: [5, 140, 198, 1] }, { name: "散租", value: 2, color: [255, 137, 0, 1] } ]} />