`

Flex线形统计图表控件LineChart演示(自定义线条颜色)

    博客分类:
  • flex
 
阅读更多

Flex线形统计图表控件LineChart,LineChart控件将数据系列表示为使用连续线条连接的多个点,可以使用图标或符号来表示该线条上的每个数据点,或者显示一条不带图标的线条。 要求其 series 属性包含 LineSeries 对象 Array。演示如下:

 

<img src=" http://dl.iteye.com/upload/picture/pic/118701/e7b70de5-9cbe-36c5-bee3-4ad9c8c0fc19.png"/>

 

源码如下:

  1. <?xml version="1.0"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" height="376"
  3. width="504">
  4. <mx:Script>
  5. <![CDATA[
  6. import mx.collections.ArrayCollection;
  7. [Bindable]
  8. private var expensesAC:ArrayCollection = new ArrayCollection( [
  9. { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
  10. { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
  11. { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
  12. { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
  13. { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
  14. ]]>
  15. </mx:Script>
  16. <!-- 定义线条样式 -->
  17. <mx:Stroke id = "s1" color="blue" weight="2"/>
  18. <mx:Stroke id = "s2" color="red" weight="2"/>
  19. <mx:Stroke id = "s3" color="green" weight="2"/>
  20. <mx:Panel title="LineChart and AreaChart Controls Example"
  21. height="322" width="448" layout="horizontal">
  22. <mx:LineChart id="linechart" height="100%" width="335"
  23. paddingLeft="5" paddingRight="5"
  24. showDataTips="true" dataProvider="{expensesAC}">
  25. <mx:horizontalAxis><!--表示横向坐标的序列字段-->
  26. <mx:CategoryAxis categoryField="Month"/>
  27. </mx:horizontalAxis>
  28. <mx:series><!--要展示的数据列字段-->
  29. <mx:LineSeries yField="Profit" form="curve" displayName="利润"
  30. lineStroke="{s1}"/>
  31. <mx:LineSeries yField="Expenses" form="curve" displayName="支出"
  32. lineStroke="{s2}"/>
  33. <mx:LineSeries yField="Amount" form="curve" displayName="数量"
  34. lineStroke="{s3}"/>
  35. </mx:series>
  36. </mx:LineChart>
  37. <mx:Legend dataProvider="{linechart}"/>
  38. </mx:Panel>
  39. </mx:Application>
分享到:
评论

相关推荐

    Delphi生成Chart柱状图表控件附效果演示.rar

    Delphi7.0源码生成一个柱状图表chart,使用了ntdll.dll,这个直方图表效果如图所示。使用了第三方控件实现的图表制作生成软件,功能比较强大。以下是图表测试源代码:  Chart := TChart.Create(nil);  try  Chart...

    flex 改变linechart datatips 显示样式代码

    在Flex开发中,LineChart是一种常用的图表组件,用于展示数据趋势。Datatips是LineChart中的一个重要特性,它会在鼠标悬停在数据点上时显示相关信息。本篇将详细介绍如何改变Flex LineChart的Datatips显示样式,包括...

    Flex BlazeDs 推数据生成lineChart实例

    Flex BlazeDs推数据生成lineChart实例是一个典型的前端与后端实时通信的应用场景,它结合了Adobe Flex技术用于前端用户界面的构建,BlazeDS作为数据推送服务,以及使用lineChart组件来展示动态更新的数据。...

    Flex 自定义 时间 日历 控件

    Flex 自定义 时间 日历 控件

    flex LineChart实例

    此Flex LineChart实例不仅展示了如何在Flex中绘制基本的线形图,还涉及到了一些高级功能,如自定义标签格式、数据绑定以及动态加载数据等。对于想要使用Flex框架进行数据可视化的开发者来说,这是一个非常实用的参考...

    flex3.2分页控件以及通过flexlib自定义Accordion

    Flex本身并不直接提供内置的分页控件,但可以通过自定义组件或者使用第三方库来实现。例如,我们可以利用Spark或MX组件集中的Button、NumericStepper等基础组件,结合ActionScript编程来创建一个自定义的分页系统。 ...

    flex 自定义控件、事件

    这个主题聚焦于“flex自定义控件与事件”,这是一个关键的开发概念,特别是对于那些希望深入理解Flex架构和提升应用用户体验的开发者来说。 自定义控件在Flex开发中扮演着重要角色,它们允许开发者根据项目需求创建...

    flex LineChart

    以下是我最近做flex组件编程时的总结,是主要针对lineChart的用法,其中某些属性对同是有横纵坐标的columnChart、barChart等都有效,比如对背景的网格线、横纵坐标线条的粗细颜色和标签的设置都有效。

    flex多文件上传控件(flex源码)

    了解以上知识点后,开发者可以对这个Flex多文件上传控件进行自定义,以适应特定项目的需求,如添加权限验证、文件预览功能、多线程上传等。总的来说,这个控件提供了一个灵活的基础,帮助开发者快速实现高效的文件...

    Flex LineChart

    Flex Chart Sytles 简单示例 基本样式使用,网上搜到的收藏下。

    Flex视图切换,自定义控件Demo.rar

    在Flex中,视图切换和自定义控件是构建用户界面时的重要技术,它们极大地增强了用户体验和交互性。 视图切换是Flex应用程序中常见的功能,允许用户在多个界面或工作区之间进行导航。这在多页面或模块化的应用中非常...

    flex添加动态曲线(lineChart)

    动态添加曲线条数 通过传递lablefild,和dataProvider的数组实现动态添加曲线

    Flex 饼形图 piechart 柱形图 columnchart 条形图 barchart 折线图 linechart

    在Flex中,ColumnChart组件支持垂直和水平柱形图,可以自定义颜色、宽度以及是否分组显示。数据源同样决定了柱子的数量和高度,通过设置series和dataProvider可以实现定制化。 **条形图(Bar Chart)** 条形图与...

    Flex开发自定义控件

    ### Flex开发自定义控件详解 #### 一、前言 随着互联网技术的不断发展与进步,用户对于网页应用的需求越来越倾向于交互性和体验性更强的应用,而Rich Internet Applications (RIA)正是这种需求下的产物之一。Adobe...

    flex 4 chart 控件

    - Flex 4的Chart控件提供了丰富的样式和主题选项,可以自定义颜色、线条样式、填充效果等,以满足设计需求。 - 用户还可以定制图表的轴、网格线、图例、标题等元素的样式。 4. **交互性**: - 图表支持用户交互...

    Flex4.0自定义控件

    ### Flex4.0自定义控件开发详解 #### 一、引言 随着Flex技术的发展,自定义控件成为提高应用程序灵活性与可扩展性的重要手段之一。本文将深入讲解Flex4.0环境下自定义控件的开发过程及注意事项,帮助开发者更好地...

    flex开发自定义控件

    ### Flex开发自定义控件详解 Flex是一种强大的框架,用于构建高性能、丰富的互联网应用程序(RIA)。自定义控件是Flex开发中的一个重要方面,它允许开发者根据特定需求创建独特的UI组件,从而增强应用的功能性和...

    flex实现的拖拽控件

    下面我们将深入探讨如何在Flex中创建一个自定义的拖拽控件。 首先,我们需要创建一个可拖动的组件。这通常是一个MX或Spark组件,如Canvas或Button。在组件上添加监听器,捕获鼠标按下(mousedown)事件,这是拖动...

    flex自定义的IP控件

    flex自定义的一个IP控件,该IP控件就像我们操作系统里面的IP控件一样。

    Flex自定义生成图表源码.rar

    这个压缩包“Flex自定义生成图表源码.rar”显然包含了一组用于创建自定义图表的源代码,这对于开发者来说是宝贵的资源,特别是那些在Flex环境中工作并需要展示数据的可视化效果的人。 在Flex中,生成图表主要依赖于...

Global site tag (gtag.js) - Google Analytics