Flex中如何通过设置GridLines对象的horizontalAlternateFill样式交错显示LineSeries图表背景颜色的例子

简介: 原文 http://blog.minidx.com/2008/11/27/1652.html 接下来的例子演示了Flex中如何通过设置GridLines对象的horizontalAlternateFill样式,交错显示LineSeries图表背景颜色。

原文 http://blog.minidx.com/2008/11/27/1652.html

接下来的例子演示了Flex中如何通过设置GridLines对象的horizontalAlternateFill样式,交错显示LineSeries图表背景颜色。

让我们先来看一下Demo可以右键View Source或点击这里察看源代码):


 

 

下面是完整代码(或点击这里察看):

Download: main.mxml
  1. <?xmlversion="1.0"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:XMLListCollection id="dp">
  8.         <mx:source>
  9.             <mx:XMLList>
  10.                 <quote date="8/27/2007"open="40.38"close="40.81"/>
  11.                 <quote date="8/24/2007"open="40.5"close="40.41"/>
  12.                 <quote date="8/23/2007"open="40.82"close="40.6"/>
  13.                 <quote date="8/22/2007"open="40.4"close="40.77"/>
  14.                 <quote date="8/21/2007"open="40.41"close="40.13"/>
  15.                 <quote date="8/20/2007"open="40.55"close="40.74"/>
  16.                 <quote date="8/17/2007"open="40.18"close="40.32"/>
  17.                 <quote date="8/16/2007"open="39.83"close="39.96"/>
  18.                 <quote date="8/15/2007"open="40.22"close="40.18"/>
  19.                 <quote date="8/14/2007"open="41.01"close="40.41"/>
  20.                 <quote date="8/13/2007"open="41"close="40.83"/>
  21.                 <quote date="8/10/2007"open="41.3"close="41.06"/>
  22.                 <quote date="8/9/2007"open="39.9"close="40.75"/>
  23.                 <quote date="8/8/2007"open="39.61"close="40.23"/>
  24.                 <quote date="8/7/2007"open="39.08"close="39.42"/>
  25.                 <quote date="8/6/2007"open="38.71"close="39.38"/>
  26.                 <quote date="8/3/2007"open="39.47"close="38.75"/>
  27.                 <quote date="8/2/2007"open="39.4"close="39.52"/>
  28.                 <quote date="8/1/2007"open="40.29"close="39.58"/>
  29.             </mx:XMLList>
  30.         </mx:source>
  31.     </mx:XMLListCollection>
  32.  
  33.     <mx:LineChart id="lineChart"
  34.             showDataTips="true"
  35.             dataProvider="{dp}"
  36.             width="100%"
  37.             height="100%">
  38.  
  39.         <mx:backgroundElements>
  40.             <mx:GridLines>
  41.                 <mx:horizontalAlternateFill>
  42.                     <mx:SolidColor color="haloSilver"alpha="0.25"/>
  43.                 </mx:horizontalAlternateFill>
  44.             </mx:GridLines>
  45.         </mx:backgroundElements>
  46.  
  47.         <!-- vertical axis -->
  48.         <mx:verticalAxis>
  49.             <mx:LinearAxis baseAtZero="false"title="Price"/>
  50.         </mx:verticalAxis>
  51.  
  52.         <!-- horizontal axis -->
  53.         <mx:horizontalAxis>
  54.             <mx:CategoryAxis id="ca"categoryField="@date"title="Date"/>
  55.         </mx:horizontalAxis>
  56.  
  57.         <!-- horizontal axis renderer -->
  58.         <mx:horizontalAxisRenderers>
  59.             <mx:AxisRenderer axis="{ca}"canDropLabels="true"/>
  60.         </mx:horizontalAxisRenderers>
  61.  
  62.         <!-- series -->
  63.         <mx:series>
  64.             <mx:LineSeries yField="@open"form="curve"displayName="Open"/>
  65.         </mx:series>
  66.     </mx:LineChart>
  67.  
  68. </mx:Application>
代码:Peter deHaan 翻译/整理/编译:中文Flex例子
目录
相关文章
|
8月前
|
小程序
小程序滚动时使标题背景颜色改变
小程序滚动时使标题背景颜色改变
65 0
|
23天前
|
数据可视化 前端开发 定位技术
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
24 0
|
5月前
|
前端开发
CSS改变图标颜色(filter一行代码解决hover变换颜色问题)
CSS改变图标颜色(filter一行代码解决hover变换颜色问题)
55 0
|
7月前
31Echarts - 柱状图(特性示例:渐变色 阴影 点击缩放)
31Echarts - 柱状图(特性示例:渐变色 阴影 点击缩放)
31 0
|
8月前
|
前端开发
css文字选中添加背景色改变字体颜色--三角号demo效果示例(整理)
css文字选中添加背景色改变字体颜色--三角号demo效果示例(整理)
|
8月前
|
前端开发
css改变滚动条的颜色-横向滚动demo效果示例(整理)
css改变滚动条的颜色-横向滚动demo效果示例(整理)
echarts圆环图设置legend数据对齐百分比样式使用rich富文本标签和formatter函数
echarts圆环图设置legend数据对齐百分比样式使用rich富文本标签和formatter函数
445 0
|
C#
C#-改变表格行颜色
C#改变表格行颜色
238 0
封装占位文字的颜色属性
封装占位文字的颜色属性
64 0
封装占位文字的颜色属性
【Excel自动化办公Part4】:调整字体与样式的操作——字体、边框、对齐格式、颜色填充
【Excel自动化办公Part4】:调整字体与样式的操作——字体、边框、对齐格式、颜色填充
133 0
【Excel自动化办公Part4】:调整字体与样式的操作——字体、边框、对齐格式、颜色填充