文档章节

Flex Chart

夏至如沫
 夏至如沫
发布于 2014/05/12 16:26
字数 563
阅读 45
收藏 0

前一段的项目想要在Flex下实现下面的界面效果:

在此输入图片描述

图表看起来像是LineChart,然后填充重叠的部分。一开的思路也是这样的,然后想办法获取图像绘制时每一个点上的坐标,接着使用 LineChart 实例的 graphics.beginFill(colorForeCircle); 对象按照重叠区域的点绘制必合图形,最后使用 graphics.endFill(); 完成填充。但是这样用直线连接而来的区域就不能实现原图那样圆滑的填充效果。

最后的解决办法是使用AreaChart伪装出来。绿线所在的 AreaSeries (A)使用跟背景一致的颜色,而黄线所在的AreaSeries (B)使用蓝色填充色,最后使用A在Y轴上的值设置为B的 minField (指定用于确定区域底部边界的 dataProvider 字段)属性。这样将不会绘制A图像所覆盖的位置,就达到只绘制重合区的目的了。

实现的效果图:

在此输入图片描述

贴出代码:

<!-- lang: c# -->
<!-- 面积图使用 最小值控制填充区 -->

<mx:AreaChart width="100%" height="100%" dataProvider="{data}"> mx:series <mx:AreaSeries areaFill="{saveColor}" areaStroke="{genColor}" chromeColor="#FF0000" minField="YAxis" yField="YValue"> </mx:AreaSeries> <mx:AreaSeries areaStroke="{conColor}" minField="YAxis" yField="YAxis"/> </mx:series> mx:horizontalAxis <mx:CategoryAxis categoryField="XAxis" labelFunction="SetXAxisStepDisplayPoxy"/> </mx:horizontalAxis> </mx:AreaChart>

为了使用方便定义了几个画笔:

<!-- lang: c# -->
		<s:SolidColorStroke id="genColor" color="#FFD200" weight="2" alpha="1"/>
	<s:SolidColorStroke id="conColor" color="#8BC63F" weight="2" alpha="1"/>
	<s:SolidColor id="saveColor" color="#83BEFF" alpha="0.5"/>

使用的数据源参考

<!-- lang: c# -->
			[Bindable]
		private var data:ArrayCollection = new ArrayCollection([
			{  XAxis: 0, YValue:0,YAxis: 0  },
			{  XAxis: 1, YValue:0,YAxis: 0  },
			{  XAxis: 2, YValue:0,YAxis: 0  },
			{  XAxis: 3, YValue:0,YAxis: 0  },
			{  XAxis: 4, YValue:2,YAxis: 2 },
			{  XAxis: 5, YValue:1.5,YAxis: 1.5},
			{  XAxis: 6, YValue:2.0,YAxis: 2.5  },
			{  XAxis: 7, YValue:2.1,YAxis: 2.5  },
			{  XAxis: 8, YValue:2.2,YAxis: 1.9  },
			{  XAxis: 9, YValue:2.3,YAxis: 1.8 },
			{  XAxis: 10,YValue:2.4, YAxis: 1.8 },
			{  XAxis: 11,YValue:2.8, YAxis: 1.8 },
			{  XAxis: 12,YValue:3, YAxis: 1.8 },
			{  XAxis: 13,YValue:2.8, YAxis: 1.8 },
			{  XAxis: 14,YValue:2.4, YAxis: 2 },
			{  XAxis: 15,YValue:2.3, YAxis: 1.5},
			{  XAxis: 16,YValue:2.2, YAxis: 2.3  },
			{  XAxis: 17,YValue:2.1, YAxis: 2.5  },
			{  XAxis: 18,YValue:2, YAxis: 2.8  },
			{  XAxis: 19,YValue:2, YAxis: 0  },
			{  XAxis: 20,YValue:0, YAxis: 0	 },
			{  XAxis: 21,YValue:0, YAxis: 0},
			{  XAxis: 22,YValue:0, YAxis: 0},
			{  XAxis: 23,YValue:0, YAxis: 0},
			{  XAxis: 24,YValue:0, YAxis: 0},
			
		]);

绑定的数据源,A和B使用相同的X轴点集合

© 著作权归作者所有

夏至如沫

夏至如沫

粉丝 12
博文 47
码字总数 25832
作品 0
郑州
后端工程师
私信 提问
用WijmoJS玩转您的Web应用——Vue

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/powertoolsteam/article/details/80813874 概述 在本文中,我们将展示如何将WijmoJS与NPM和Webpack一起使用来...

powertoolsteam
2018/06/26
0
0
[知其所以然]探究Flex盒子的‘’弹性‘’

背景 我们使用Flexbox 实现垂直水平居中、自适应容器宽度乐此不疲,因为确确实实很方便。可以简便、完整、响应式地实现各种页面布局,目前已得到所有现代浏览器的支持。但Flex属性如何计算呢...

快狗打车前端团队
05/23
0
0
[译] width 与 flex-basis 的区别

原文:The Difference Between Width and Flex Basis,from gedd.ski 摄影 | GoranH 这个问题很多人问起过我,实际上,当我对使用 Flexbox 还不太熟悉的时候,我谷歌过这个问题很多次。查看下...

zhangbao90s
08/15
0
0
02-伸缩布局(Flex布局)

一、什么是Flex布局? Flex是Flexible Box的缩写,顾名思义为"弹性布局"或"伸缩布局",用来为盒装模型提供最大的灵活性。 1️⃣ 任何一个容器都可以指定为Flex 布局。 2️⃣ 行内元素也可以使...

博行天下
07/18
0
0
CSS3 Flex布局(伸缩布局盒模型)学习

https://www.cnblogs.com/sxz2008/p/6635196.html 实例:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html CSS2定义了四种布局:块布局、行内布局、表格布局盒定位布局。 CSS3引入...

壹峰
2018/08/08
57
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 别问,问就是没空

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享容祖儿/彭羚的单曲《心淡》: 《心淡》- 容祖儿/彭羚 手机党少年们想听歌,请使劲儿戳(这里) @wqp0010 :周...

小小编辑
今天
323
7
golang微服务框架go-micro 入门笔记2.1 micro工具之micro api

micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.shtml?id=6 本文全部代码https://idea.techidea8....

非正式解决方案
今天
5
0
Spring Context 你真的懂了吗

今天介绍一下大家常见的一个单词 context 应该怎么去理解,正确的理解它有助于我们学习 spring 以及计算机系统中的其他知识。 1. context 是什么 我们经常在编程中见到 context 这个单词,当...

Java知其所以然
昨天
5
0
Spring Boot + Mybatis-Plus 集成与使用(二)

前言: 本章节介绍MyBatis-Puls的CRUD使用。在开始之前,先简单讲解下上章节关于Spring Boot是如何自动配置MyBatis-Plus。 一、自动配置 当Spring Boot应用从主方法main()启动后,首先加载S...

伴学编程
昨天
8
0
用最通俗的方法讲spring [一] ──── AOP

@[TOC](用最通俗的方法讲spring [一] ──── AOP) 写这个系列的目的(可以跳过不看) 自己写这个系列的目的,是因为自己是个比较笨的人,我曾一度怀疑自己的智商不适合干编程这个行业.因为在我...

小贼贼子
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部