用Flex的图表组件搞个福彩的玩意

简介:






 
主程序文件:
<?xml version="1.0" encoding="utf-8"?> 
<!--七乐彩(7/30)--> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> 
  <mx:Style> 
    Application{font-size:14pt;} 
  </mx:Style> 
        <mx:Script> 
                <![CDATA[ 
                import mx.collections.ArrayCollection; 

                [Bindable] 
                private var lottery:ArrayCollection = new ArrayCollection( [ 
                        { Ball: "球1", Q110: 04, Q111: 06, Q112: 03 }, 
                        { Ball: "球2", Q110: 05, Q111: 07, Q112: 09 }, 
                        { Ball: "球3", Q110: 11, Q111: 08, Q112: 20 }, 
                        { Ball: "球4", Q110: 12, Q111: 09, Q112: 24 }, 
                        { Ball: "球5", Q110: 14, Q111: 18, Q112: 25 }, 
                        { Ball: "球6", Q110: 15, Q111: 26, Q112: 26 }, 
                        { Ball: "球7", Q110: 23, Q111: 30, Q112: 28 } 
                        ]); 
                ]]> 
        </mx:Script> 
        <mx:Stroke id = "s1" color="red"/> 
        <mx:Stroke id = "s2" color="green"/> 
        <mx:Stroke id = "s3" color="blue"/> 
        <mx:Panel width="600" height="600" layout="horizontal" title="七乐彩第2008Q110期-第2008Q112期开奖情况"> 
                <mx:LineChart id="linechart" height="100%" width="100%" 
                        paddingLeft="5" paddingRight="5"    
                        showDataTips="true" dataProvider="{lottery}"> 
                                 
                        <mx:horizontalAxis> 
                                <mx:CategoryAxis categoryField="Ball"/> 
                        </mx:horizontalAxis> 

                        <mx:series> 
                                <mx:LineSeries yField="Q110" form="segment" displayName="第2008Q110期" lineStroke="{s1}"/> 
                                <mx:LineSeries yField="Q111" form="segment" displayName="第2008Q111期" lineStroke="{s2}"/> 
                                <mx:LineSeries yField="Q112" form="segment" displayName="第2008Q112期" lineStroke="{s3}"/> 
                        </mx:series> 
                </mx:LineChart>            
                <mx:Legend dataProvider="{linechart}" legendItemClass="MyLegendItem"/> 
        </mx:Panel>    
</mx:Application> 
 
 
自定义组件MyLegendItem.mxml:
 
<?xml version="1.0" encoding="utf-8"?> 
<mx:LegendItem xmlns:mx="http://www.adobe.com/2006/mxml" styleName="font12"> 
  <mx:Style> 
    .font12{font-size:12pt;fontWeight:normal;} 
  </mx:Style> 
</mx:LegendItem>
 
这个组件主要是为了改变那个Legend的字体大小等。

本文转自 xcf007 51CTO博客,原文链接:http://blog.51cto.com/xcf007/102055 ,如需转载请自行联系原作者


 
目录
打赏
0
0
0
0
347
分享
相关文章
ArkUI框架,Flex布局,基础组件及封装,父子组件的双向绑定
Flex组件用于创建弹性布局,开发者可以通过Flex的接口创建容器组件,进而对容器内的其他元素进行弹性布局,例如:使三个元素在容器内水平居中,垂直等间隔分散。 例如:如下的布局代码分别表示:(垂直排列,水平居中,垂直居中)
509 0
ArkUI框架,Flex布局,基础组件及封装,父子组件的双向绑定
鸿蒙next版开发:ArkTS组件通用属性(Flex布局)
在HarmonyOS next中,ArkTS的Flex布局是一种强大且灵活的布局方式,支持水平或垂直方向排列元素,并能动态调整大小和位置以适应不同屏幕。主要属性包括justifyContent、alignItems、direction和wrap,适用于导航栏、侧边栏和表单等多种场景。示例代码展示了如何使用这些属性创建美观的布局。
192 10
FLEX组件可视化设计器CSS3代码生成器
FLEX组件可视化设计器CSS3代码生成器
87 4
CSS Flex布局实战案例:构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤,我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码,还让我们能够轻松实现复杂的布局效果,如响应式设计。在实战中,掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。
|
10月前
|
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Flex容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Flex容器组件
247 5
|
10月前
|
【鸿蒙软件开发】ArkUI之容器组件Counter(计数器组件)、Flex(弹性布局)
【鸿蒙软件开发】ArkUI之容器组件Counter(计数器组件)、Flex(弹性布局)
346 0
【鸿蒙软件开发】ArkUI之容器组件Counter(计数器组件)、Flex(弹性布局)
会议OA项目-首页->flex弹性布局,轮播图后台数据获取及组件使用(后台数据交互mockjs),首页布局
会议OA项目-首页->flex弹性布局,轮播图后台数据获取及组件使用(后台数据交互mockjs),首页布局
101 0
Flutter(七)——多子元素组件:GridView,CustomScrollView,Flex,Wrap
Flutter(七)——多子元素组件:GridView,CustomScrollView,Flex,Wrap
378 0
APICloud AVM框架列表组件list-view的使用、flex布局教程
avm.js 是APICloud 推出的多端开发框架。使用 avm.js 一个技术栈可同时开发 Android & iOS 原生 App、小程序和 iOS 轻 App,且多端渲染效果统一;全新的 App 引擎 3.0 不依赖 webView,提供百分百的原生渲染,保障 App 性能和体验与原生 App 一致。
227 0
APICloud AVM框架列表组件list-view的使用、flex布局教程
好客租房116-flex布局组件导航菜单
好客租房116-flex布局组件导航菜单
125 0
好客租房116-flex布局组件导航菜单