Flex achieves dual-axis stripe chart and flex dual-axis stripe chart

Flex achieves dual-axis stripe chart and flex dual-axis stripe chart

1. Problem background

Generally, a bar chart can be a dual-axis chart, but how can it be a dual-axis graph?

2. Implementation instance

<? 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% "creationComplete =" initHandler (event) "> <s: layout> <s: BasicLayout/> </s: layout> <fx: Script> <! [CDATA [import mx. collections. arrayCollection; import mx. events. flexEvent; [Bindable] private var chartArray: ArrayCollection = new ArrayCollection ([{week: "Monday", snake: "5459", cow: "7845" },{ week: "Tuesday", snake: "8956", cow: "7845" },{ week: "Wednesday", snake: "3562", cow: "7845" },{ week: "Thursday", snake: "7856", cow: "7845" },{ week: "Friday", snake: "1245", cow: "7845" },{ week: "Saturday", snake: "9656", cow: "7845" },{ week: "Sunday", snake: "6784", cow: "7845" }]); Protected function initHandler (event: FlexEvent): void {cate. ticksBetweenLabels = false;}]> </fx: Script> <fx: Declarations> <! -- Place non-visual elements (such as services and value objects) Here --> </fx: Declarations> <mx: VBox width = "100%" height = "100%" horizontalAlign = "center" paddingBottom = "10" paddingLeft = "10" paddingRight = "20" paddingTop = "10"> <mx: barChart id = "barchart" width = "100%" height = "90%" showDataTips = "true" dataProvider = "{chartArray}"> <mx: verticalAxis> <mx: categoryAxis id = "cate" categoryField = "week" displayName = "week"/> </mx: verticalAxis> <mx: series> <mx: barSeries displayName = "snake quantity" xField = "snake" yField = "week"/> </mx: series> <mx: secondVerticalAxis> <mx: categoryAxis categoryField = "week" displayName = ""/> </mx: secondVerticalAxis> <mx: secondSeries> <mx: lineSeries displayName = "" xField = "cow" yField = "week"/> </mx: secondSeries> </mx: BarChart> <mx: legend dataProvider = "{barchart}"/> </mx: VBox> </s: Application>

3. Implementation result

The Y axis of the Flex bar chart is displayed.

Many components of projects that can be implemented cannot be applied. Therefore, developers can expand their own components!

How to associate Flex with the double X axis

The Cluster Column in axiis is implemented and you can plot it yourself.