1, design ideas
(1) Design a combination diagram, which share a data source
(2) The combination chart is composed of a histogram and a line chart.
(3) The data shown in the histogram is based on the vertical axis on the left, and the data of the line chart is based on the vertical axis on the right
2, the source code is as follows
Doubley.mxml:
Copy Code code as follows:
<?xml version= "1.0" encoding= "Utf-8"?>
<s:application xmlns:fx= "http://ns.adobe.com/mxml/2009"
Xmlns:s= "Library://ns.adobe.com/flex/spark"
xmlns:mx= "Library://ns.adobe.com/flex/mx"
Width= "100%" height= "100%" >
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
<s:solidcolor id= "SC1" color= "0x00bfff" alpha= ". 3"/>
<mx:solidcolorstroke id= "S1" color= "0x00bfff" weight= "2"/>
</fx:Declarations>
<fx:Script>
<! [cdata[
Import mx.collections.ArrayCollection;
Composite diagram Data Binding
[bindable]
private var gridarray:arraycollection = new ArrayCollection ([
{quarter: "First quarter", Monday: "78454", Tuesday: "45454", Wednesday: "12012", Thursday: "78441", Friday: "32314", Saturday: " 89454 ", Sunday:" 45421 ", Rate:" 23 "},
{quarter: "second quarter", Monday: "56444", Tuesday: "65612", Wednesday: "78454", Thursday: "45124", Friday: "35451", Saturday: " 45421 ", Sunday:" 65421 ", Rate:" 47 "},
{quarter: "third quarter", Monday: "51210", Tuesday: "94210", Wednesday: "65643", Thursday: "45011", Friday: "45122", Saturday: " 45421 ", Sunday:" 65988 ", Rate:" 13 "},
{quarter: "Quarter Four", Monday: "61210", Tuesday: "45122", Wednesday: "65323", Thursday: "95110", Friday: "65623", Saturday: " 45111 ", Sunday:" 65311 ", Rate:" 17 "}
]);
]]>
</fx:Script>
<mx:vbox width= "100%" height= "100%" >
<mx:columnchart id= "Chart" width= "100%" height= "90%" showdatatips= "true" fontsize= "dataprovider=" "{GridArray}" >
<!--Set Horizontal axis-->
<mx:horizontalAxis>
<mx:categoryaxis dataprovider= "{}" categoryfield= "Quarter"/>
</mx:horizontalAxis>
<!--set the maximum and minimum values for the left vertical axis-->
<mx:verticalAxis>
<mx:linearaxis minimum= "0.00" maximum= "100000.00"/>
</mx:verticalAxis>
<!--set Column chart for left vertical axis-->
<mx:series>
<mx:columnseries id= "Column1" xfield= "quarter" yfield= "Monday" displayname= "Monday"/>
<mx:columnseries id= "Column2" xfield= "quarter" yfield= "Tuesday" displayname= "Tuesday"/>
<mx:columnseries id= "Column3" xfield= "quarter" yfield= "Wednesday" displayname= "Wednesday"/>
<mx:columnseries id= "column4" xfield= "quarter" yfield= "Thursday" displayname= "Thursday"/>
<mx:columnseries id= "column5" xfield= "quarter" yfield= "Friday" displayname= "Saturday"/>
<mx:columnseries id= "column6" xfield= "quarter" yfield= "Saturday" Displayname= "seven weeks"/>
<mx:columnseries id= "column7" xfield= "quarter" yfield= "Sunday" Displayname= "weekday eight"/>
</mx:series>
<!--set the maximum and minimum values for the right vertical axis-->
<mx:secondVerticalAxis>
<mx:linearaxis minimum= "0.00" maximum= "100.00"/>
</mx:secondVerticalAxis>
<!--set the polyline--> the right vertical axis
<mx:secondSeries>
<mx:lineseries id= "line" dataprovider= "{Gridarray}" xfield= "Quarter" yfield= "Rate" displayname= "ratio"/>
</mx:secondSeries>
</mx:ColumnChart>
<!--set legend Properties-->
<mx:HBox>
<s:label width= "/>"
<mx:legend dataprovider= "{chart}" fontsize= "Width=" 100% "height=" "direction=" Horizontal "horizontalgap=" 45 "Verticalgap="/>
</mx:HBox>
</mx:VBox>
</s:Application>
3, display the results
