Flex chart: describes related attributes ........

Source: Internet
Author: User

1. Chart: overall control
2. Series: defines the data to be displayed, and the X and Y axes display the data respectively. It is an array containing the corresponding seriesitem. Seriesitem encapsulates extreme points, filling methods, XY data, and so on.

3. Display name attribute control tooltip in Series

4. barest-> barseries, columnset-> columnset

5. categoryaxis maps a column of data to the axis.

Lineraxis custom axis data, maximum value and minimum value

Logaxis in log format

Datetimeaxis

6. Use axixrender to change the axis appearance specified by the horizontalaxisrenderers or verticalaxisrenderers

7. chartdata Data source:

Scriptblock, XML, remoteobject, WebService, httpservice, mxml

Data Source Type:

(1) Static Array

Private var expenses: array = [

{Month: "January", profit: 2000, expenses: 1500, amount: 450 },

{Month: "February", profit: 1000, expenses: 200, amount: 600 },

{Month: "March", profit: 1500, expenses: 500, amount: 300 },

{Month: "April", profit: 500, expenses: 300, amount: 500 },

{Month: "may", profit: 1000, expenses: 450, amount: 250 },

{Month: "June", profit: 2000, expenses: 500, amount: 700}

];

(1) mxml:

<Mx: array id = "Expenses">

<Mx: Object

Month = "January"

Profit = "2000"

Expenses = "1500"

Amount = "450"

/>

<Mx: Object

Month = "February"

Profit = "1000"

Expenses = "200"

Amount = "600"

/>

<Mx: Object

Month = "March"

Profit = "1500"

Expenses = "500"

Amount = "300"

/>

<Mx: Object

Month = "maid"

Profit = "500"

Expenses = "300"

Amount = "500"

/>

<Mx: Object

Month = "may"

Profit = "1000"

Expenses = "450"

Amount = "250"

/>

<Mx: Object

Month = "June"

Profit = "2000"

Expenses = "500"

Amount = "700"

/>

</MX: array>

Or

<Mx: array id = "Expenses">

<Mx: Object>

<Mx: month> January </MX: month>

<Mx: profit> 2000 </MX: profit>

<Mx: Expenses> 1500 </MX: Expenses>

<Mx: amount> 450 </MX: amount>

</MX: Object>

<Mx: Object>

<Mx: month> February </MX: month>

<Mx: profit> 1000 </MX: profit>

<Mx: Expenses> 200 </MX: Expenses>

<Mx: amount> 600 </MX: amount>

</MX: Object>

<Mx: Object>

<Mx: month> March </MX: month>

<Mx: profit> 1500 </MX: profit>

<Mx: Expenses> 500 </MX: Expenses>

<Mx: amount> 300 </MX: amount>

</MX: Object>

<Mx: Object>

<Mx: month> distinct L </MX: month>

<Mx: profit> 500 </MX: profit>

<Mx: Expenses> 300 </MX: Expenses>

<Mx: amount> 300 </MX: amount>

</MX: Object>

<Mx: Object>

<Mx: month> May </MX: month>

<Mx: profit> 1000 </MX: profit>

<Mx: Expenses> 450 </MX: Expenses>

<Mx: amount> 250 </MX: amount>

</MX: Object>

<Mx: Object>

<Mx: month> June </MX: month>

<Mx: profit> 2000 </MX: profit>

<Mx: Expenses> 500 </MX: Expenses>

<Mx: amount> 700 </MX: amount>

</MX: Object>

</MX: array>

(2) Collection

Can be sorted, added, deleted, and filtered. And you can bind the synchronization to the graph.

<Mx: arraycollection id = "Expenses">

<Mx: Object>

<Mx: month> January </MX: month>

<Mx: profit> 2000 </MX: profit>

<Mx: Expenses> 1500 </MX: Expenses>

<Mx: amount> 450 </MX: amount>

</MX: Object>

<Mx: Object>

<Mx: month> February </MX: month>

<Mx: profit> 1000 </MX: profit>

<Mx: Expenses> 200 </MX: Expenses>

<Mx: amount> 600 </MX: amount>

</MX: Object>

<Mx: Object>

<Mx: month> March </MX: month>

<Mx: profit> 1500 </MX: profit>

<Mx: Expenses> 500 </MX: Expenses>

<Mx: amount> 300 </MX: amount>

</MX: Object>

<Mx: Object>

<Mx: month> distinct L </MX: month>

<Mx: profit> 500 </MX: profit>

<Mx: Expenses> 300 </MX: Expenses>

<Mx: amount> 300 </MX: amount>

</MX: Object>

<Mx: Object>

<Mx: month> May </MX: month>

<Mx: profit> 1000 </MX: profit>

<Mx: Expenses> 450 </MX: Expenses>

<Mx: amount> 250 </MX: amount>

</MX: Object>

<Mx: Object>

<Mx: month> June </MX: month>

<Mx: profit> 2000 </MX: profit>

<Mx: Expenses> 500 </MX: Expenses>

<Mx: amount> 700 </MX: amount>

</MX: Object>

</MX: arraycollection>

(3) random data math. Random

(4) Structured Data: for example, memory.

8. areachart:

Form attributes: Segment, step, reversegment, vertical, horizontal

8. padding: attributes: paddingleft, paddingright, paddingtop, paddingbottom, gutterleft, gutterright, guttertop, gutterbottom (Chart attribute)

9. labelgap: axisrender attributes

10. tickplacement minortickplacement: axisrender attribute, which has four values: Inside, cross, none, and outside.

Ticklength, minorticklength: Specifies the length of a tag in the axisrender attribute.

Showline: Specifies whether to display the axis of the axisrender attribute.

Showlabels: axisrender attribute, whether to display label

Axisstroke: Specifies the axisrender attribute. It refers to the display of a stroke object and determines the color and transparency.

11. Stroke parameters: color, weight, and Alpha.

Stroke can be used for axisrender, xxxseries, linestroke (lineseries)

12. Fills (Series attribute): it is used to fill the seriesitem and customize the background color. It can be fixed or gradient. In addition, fillfunction can replace fills in series.

Fills. If it is one, all the series take the same value. If it is an array, it cyclically takes the value.

In addition to hlcoseries, fills attributes are supported.

Fills can be referenced in series {}, or <fills> <solidcolor>... </Fills>

13. If fills is in the chart attribute, it indicates the background color.

14. Use fills,. mychartstyle {fill: #00ff00} in CSS and reference mychartstyle in stylename.

15. If the array:. mychartstyle {fill: #00ff00, # ff0000, # 0000ff…} is used in CSS ...}

16. The fill attribute includes linergradient and radialgradient to define the gradient. The specific gradiententity is required.

17. Add background projection to the filters attribute. If you do not want projection, <mx: seriesfilters> <mx: array/> </MX: seriesfilters>

18. gridline, used in backgroundelements or annotationelements, indicates the grid line. Gridline can be represented by the following attributes: javashorizontalchangecount orizontalorigincount horizontalshoworigin into verticalalternatefill verticalchangecount verticalorigincount verticalshoworigin verticaltickaligned

19. If you do not want a grid, set the backgroundelements element to an empty array.

20. If you want to tilt the label font, You need to introduce a new TTF font and specify it in render. Otherwise, the label can only be vertical.

21. chartitem represents a vertex, including data and render. By changing the itemrender attribute in series, specify its itemrenderer = "MX. charts. renderers. crossitemrenderer ", or use the as setstyle method to specify series. setstyle ('itemrenderer ', new factoryclass (MX. charts. renderers. crossitemrenderer ));

22. lineseries specifies two render: itemrender specifies the render of the data, and linesegmentrender specifies the split between lines.

Areaseries specifies two render: arearender specifies the appearance of the area, and itemrender specifies the appearance of data.

23. Create a custom render and inherit from programicskin to implement the idatarender interface.

24. categoryaxis: Provides discrete classification data. Its dataprovider attribute can be a label array or an object array.

Numbericaxis: maps consecutive coordinate points. You often use the following numbericaxis: lineraxis, logaxis, and datetimeaxis.

Datetimeaxis: supported data types include date, string, and number. The parsefunction attribute returns a date object.

You can set the maximum and minimum values of datetimeaxis, but it must be of the date type.

25. titlerender can change the title appearance. Generally, it inherits chartlabel to create a personalized title and overwrites the createchild and updatedisplaylist methods.

26. Set the showlabels attribute of the axisrender to false. The label is not displayed.

You can also use labelfunction (xxxaxis attribute) to define the callback function.

27. barseries, columnseries, and pieseries support datalabel. Set the labelposition attribute "Inside, outside" of xxxseries to display datalabel. The value of datalabel can be the value of labelfield and labelfunction.

28. datatip object:

Set showip IP of xxxchart to true.

You can set the style IP style to modify the datatip style.

The datatipfunction attribute of xxxchart can define a callback function to change the datatip style. Here, hitdata. item refers to xxxseriesitem. Hitdata. element refers to xxxseries.

You can also use datatiprender to reference a render to describe datatip.

29. Call the fillfunction callback function of xxxseries to customize the style of each item (Per-item). For example, display different colors based on threadhold. This function returns a fill object, which can be solidcolor, lineargradient, and radialgradient.

30. Set baseatzero of axis to false. The starting point is automatically determined by the system.

31. Type attribute of chart:

Cluster: barchart and columnchart

Overlaid: areachart

100%: accumulated to 100%

Stacked: Aggregation

32. Legend: each item is ledenditem, which includes two parts: marker and label. By default, legend fills itself with the displayname and fills attributes of control. Legend can be customized

<Mx: Legend>

<Mx: legenditem label = "Smith" fontweight = "bold">

<Mx: Fill>

<Mx: solidcolor color = "{smithcolor}"/>

</MX: Fill>

<Mx: stroke>

<Mx: stroke color = "0 xcccccc" Weight = "2"/>

</MX: stroke>

</MX: legenditem>

<Mx: legenditem label = "Decker" fontweight = "bold">

<Mx: Fill>

<Mx: solidcolor color = "{deckercolor}"/>

</MX: Fill>

<Mx: stroke>

<Mx: stroke color = "0 xcccccc" Weight = "2"/>

</MX: stroke>

</MX: legenditem>

</MX: Legend>

32. The chart supports mouseevent, chartevent, and chartitemevent.

33. You can set interactive = "false" of xxxseries to prevent the occurrence of User Interaction Events. In this way, the datatip cannot be displayed, and the hitdata object cannot be sent by triggering an event or calling finddatapoints ().

34. The special effects supported by chart include fade, zoom, and slide.

Chart supports standard results triggers, such as showeffect and hideeffect.

Some effect attributes of xxxchart include creationcompleteeffect, hideeffect, and showeffect.

Chartseries exclusive effect is hidedataeffect and showdataeffect, they are series attributes. When the data source changes, the time limit is triggered.

Charting exclusive effects: seriesinterpolate, seriesslide, and serieszoom.

35. Public attributes of charting effect:

Duration: the time when the effect is completed.

Elementoffset: interval between effects of elements. The default value is 50 milliseconds.

Minimumelementduration: time required to complete a single element.

Offset: the start time of the delay.

36. serieszoom effect: horizontalfocus, verticalfocus, relativeto.

37. You can set attributes through setstyle ('showeffect ', rearrangedata) of series. Rearrangedata = new seriesinterpolate ();

38. You can also set CSS to introduce effect.

39. bindingutils. bindproperty is used to bind slider and effect attributes.

40. hitdata can be used to obtain

Hitdata = event. hitdata;

Chartitem = columnseriesitem (hitdata. chartitem );

Renderer = chartitem. itemrenderer;

Series = columnseries (hitdata. element );

41. Two Methods of drill-down: (1) Changing the data source of dataprovider (2) re-combining the data and passing it to dataprovider

42. A chartitem represents an Entity Data in series, which is composed of chartitem.

43. If you want to select the chart item, you need to set selectionmodel (none, single, multiple ). Set the selectable attribute of series to true.

44. chartitem options include mouse selection, keyboard selection, area selection, and programming selection.

45. You can use selectedindices of series to obtain the selected items. Series has the following select attributes

Selecteditem

Selecteditems

Selectedindex

Selectedindices

46. Programming selection does not trigger the change event.

47. chartbase class. You can use the following methods to select item.

Getnextitem ()

Getpreviusitem ()

Getfirstitem ()

Getlastitem ()

The selectedchartitem and selectedchartitems methods can be used to obtain the selected item, but they cannot be set. This is a read-only method.

48. The currentstatus attributes of chartitem include none, rolover, selected, disabled, focusedselected, and focused.

49. The getitemsinregion () method of the chart returns all items in a rectangle. However, this method does not trigger the change event or change the status of items.

50. Access related data through chartitem.

Forcibly convert to the corresponding item type: var CSI: columnseriesitem = columnseriesitem (A [I]);

CSI. yvalue: obtain the corresponding Y-axis data.

CSI. item. Profile: obtain the data of the corresponding item.

CSI. element: obtain the corresponding series.

51. If the following attribute changes through user interaction, a change event is triggered:

Selectedchartitem and selectedchartitems (on the chart)

Selecteditem, selecteditems, selectedindex, and selectedindices (on the chart & apos; s Series)

52. Drag and Drop chartitem:

(1) set the dragenable attribute of the drag-and-drop source chart to true;

(2) set the dropenable attribute of the target chart to false.

(3) Add the dragenter and dragdrop listeners to the target chart.

(4) In the processor of the dragenter event, obtain the reference of the target chart and register it in the dragmanager. Call dragmanager. acceptdragdrop () to accept the event.

(5) In the drop event processor, obtain the array of the drag chart item and add it to the dataprovider of the target chart.

53. Add a chart to the chart. Use the following two classes: cartesiandatacanvas and polardatacanvas. You can

Add a drawing on the canvas or draw a drawing directly on the canvas. The adddatachild () method can be used to add displayobject to the canvas. You can also use addchild and addchildat methods. Update the position of displayobject using the updatedatachild method of canvas.

You can use the plotting method, such as lineto, moveTo, curveto, drawrec ....

Call the clear, removechild, and removechildat methods of canvas to clear objects.

54. Canvas can be either a foreground or a background. Adding canvas to annotationelement is the foreground, and adding canvas to backgroundelements is the background.

55. Restrictions on using data canvas: (1) drag is not supported (2) Select API is not supported

To add offset to the canvas, add the cartesiancanvasvalue object to the adddatachild method. Entry: canvas. adddatachild (columnlabel,

New cartesiancanvasvalue (S, labeloffset ),

New cartesiancanvasvalue (n, labeloffset)

 

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.