Flex3 chart Study Notes: piechart (pie chart)

Flex3 chart Study Notes: piechart (pie chart)

I have been in contact with flex3 for a while, but I have never been able to learn the flex chart. Today we are just getting free, so I am exploring for a small example. The function is very simple. Let's take a look at it first:

The following is the code (explained in the comment ):

<? 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; // initialization function initapp (): void {// defines an array during program initialization, the initial value AC = new arraycollection ([{name: "value1", num: 10}, {name: "value2", num: 10}, {Name: "value3", num: 10}]); // use AC as the pie chart data source piechart1.dataprovider = ac;} // obtain the values of the current three slide bars and generate an array, then serve as the data source of the pie chart again. Note: The function test (): void {acnew = new arraycollection ([{name: "value1", num: hs1.value}, {Name: "value2", num: hs2.value}, {name: "value3", num: hs3.value}]); piechart1.dataprovider = acnew ;} // The callback function private function showlabel (data: object, field: String, index: Number, percentvalue: Number): String {// The returned value, is the label to be displayed in the pie chart. Here we use the value of the current slider (data. num) divided by the sum of the current values of the Three slide bars to get the percentage // Note: Data. num indicates the field attribute of the pieseries component object, that is, the 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> <! -- Attributes of the pieseries component: --> <! -- Labelfunction attribute: Specifies the callback function for displaying labels. The showlabel function is specified here. --> <! -- Namefield attribute: Specify the fields corresponding to the bound array for each part of the pie chart. In this example, the name field of the corresponding array, that is, value1, value2, and value3 --> <! -- Field attribute: Specify the fields corresponding to each part of the pie chart and the bound array. In this example, the num field of the corresponding array, that is, hs1.value, hs2.value, and hs3.value --> <mx: pieseries displayname = "Series 1" labelfunction = "showlabel" labelposition = "outside" namefield = "name" field = "num"/> </MX: Series> </MX: piechart> <mx: Legend dataprovider = "{piechart1}"/> <! -- Main attributes of the hslider component: --> <! -- Livedragging attribute: Boolean. The change event of hslider is triggered after the slider is moved. If you want to continuously trigger the slider when it is moved, you can set this attribute value to true. The default value is false --> <! -- Snapinterval attribute: numeric type. By default, when the slider is moved, the current value of the slider is precise to the last two digits of the decimal point. In fact, we usually do not need to use such precise values. You can set this attribute to determine the interval value for moving a slider. How do you feel the more complicated it is? We suggest you experiment with it to understand ^_^ --> <! -- Tickinterval attribute: numeric type. The interval of the scale on the slider. For example, the maximum value of a slide is 100. If you set this attribute to 50, three scale values are displayed. Why are 3 displayed? Just give it a try. --> <! -- Minimum/maximum attribute: numeric type. I believe you will understand these two attributes at a glance, setting the minimum and maximum values. --> <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>