1. 程式人生 > >Flex 柱狀圖2

Flex 柱狀圖2

<mx:Panel title="各線路受影響人數對比圖"
                                  width="100%"
                                  height="100%">
                            <common:AmSerialCharts id="char2"
                                                   width="100%"
                                                   height="100%"
                                                   dataProvider="{linePeopArr}"
                                                   categoryField="lineName"
                                                   marginBottom="60"
                                                   marginLeft="50"
                                                   startDuration="1">
                                <!--資料顯示樣式
                                     balloonText 繫結資料來源顯示的內容
                                     bullet 折角的點樣式(圓點,方框等)
                                     lineThickness="2" 線條的粗細
                                     type  型別(曲線、折現、柱狀圖等)
                                     visibleInLegend=false //圖示內容不顯示
                                     showBalloon=false //柱狀圖不顯示
                                     fillAlphas="[1]"    柱狀圖的填充
                                     fillColors="[#5eb451]"    柱狀圖的填充顏色
                                -->
                                <common:graphs>
                                    <amcharts:AmGraph title="滯留人數"
                                                      balloonText="[[lineName]] :[[peoplenum]]人"
                                                      valueField="peoplenum"
                                                      lineColor="#5eb451"
                                                      color="#000000"
                                                      type="column"
                                                      lineThickness="2"
                                                      bullet="square"
                                                      fillAlphas="[1]"
                                                      fillColors="[#5eb451]"/>
                                </common:graphs>
                                <!--設定X軸可顯示的最多資料條數
                                     gridCount={資料來源的長度}
                                     gridAlpha 設定背景線的輕重
                                     labelRotation="30"  傾斜角度 如果有漢字顯示則不加此屬性,就能顯示漢字
                                     styleName 樣式,可顯示X軸內容-->
                                <common:categoryAxis>
                                    <amcharts:CategoryAxis gridAlpha="0.1"
                                                           gridCount="{linePeopArr.length}"/>
                                </common:categoryAxis>
                                <!--設定Y軸最大最小數值
                                     min="0"
                                     max="6"-->
                                <common:valueAxes>
                                    <amcharts:ValueAxis position="left"
                                                        axisThickness="2"
                                                        axisColor="#FF0000"/>
                                </common:valueAxes>
                                <!--設定顯示資料框的邊框顏色及樣式-->
                                <common:balloon>
                                    <amcharts:AmBalloon cornerRadius="10"
                                                        borderThickness="2"
                                                        borderColor="#FFFFFF"
                                                        borderAlpha="1"/>
                                </common:balloon>
                                <!--滑鼠滑過即顯示資料-->
                                <common:chartCursor>
                                    <amcharts:ChartCursor zoomable="false"
                                                          cursorAlpha="0"
                                                          categoryBalloonEnabled="false"/>
                                </common:chartCursor>
                            </common:AmSerialCharts>
                            <!--顯示每條線路可點選實現線路隱藏-->
                            <common:AmLegends dataProvider="{chart2}"
                                              width="100%"
                                              switchType="v"
                                              textClickEnabled="false"
                                              color="#000000"
                                              valueWidth="30"
                                              marginBottom="0"
                                              marginTop="0"
                                              marginRight="0"
                                              marginLeft="40"/>
                        </mx:Panel>