`
Majesty123456
  • 浏览: 6776 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

flex chart x轴字体倾斜 显示开

 
阅读更多

 解决图表X轴LABEL显示不开的问题:效果如下:

代码:

 

<?xml version="1.0"?>
<!-- Simple example to demonstrate the GridLines class. -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx">
	
	<fx:Script>
		<![CDATA[
			
			import mx.collections.ArrayCollection;
			
			[Bindable]
			private var expensesAC:ArrayCollection = new ArrayCollection( [
				{ Month: "Jan 10:10:00", Profit: 2000, Expenses: 1500, Amount: 450 },
				{ Month: "Feb 10:10:00", Profit: 1000, Expenses: 200, Amount: 600 },
				{ Month: "Mar 10:10:00", Profit: 1500, Expenses: 500, Amount: 300 },
				{ Month: "Apr 10:10:00", Profit: 1800, Expenses: 1200, Amount: 900 },
				{ Month: "May 10:10:00", Profit: 2400, Expenses: 575, Amount: 500 } ]);
		]]>
	</fx:Script>
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
		@namespace draw "draw.*";
		
		@font-face { 
			src:url("assets/font/arial.ttf"); 
			font-family: EmbeddedArial; 
			embedAsCFF:false; 
		} 
		
		mx|LineChart { 
			fontFamily: EmbeddedArial; 
			fontSize: 12px; 
		} 
		
	</fx:Style>
	<mx:Panel title="GridLines Example" height="100%" width="100%">
		
		<mx:LineChart id="linechart" height="100%" width="100%"
					  paddingLeft="5" paddingRight="5" 
					  showDataTips="true" dataProvider="{expensesAC}">
			<mx:backgroundElements>
				<mx:GridLines gridDirection="horizontal">
					<mx:horizontalStroke>
						<mx:SolidColorStroke weight="1"/>
					</mx:horizontalStroke>
					<mx:horizontalFill>
						<mx:SolidColor color="0xCCCCCC" alpha=".66"/>
					</mx:horizontalFill>
				</mx:GridLines>
			</mx:backgroundElements>
			<mx:horizontalAxis>
				<mx:CategoryAxis id="ca" categoryField="Month"/>
			</mx:horizontalAxis>
			<mx:horizontalAxisRenderers>
				<mx:AxisRenderer axis="{ca}" labelRotation="65" canDropLabels="true" />
			</mx:horizontalAxisRenderers>
			<mx:series>
				<mx:LineSeries yField="Profit" form="curve" displayName="Profit"/>
				<mx:LineSeries yField="Expenses" form="curve" displayName="Expenses"/>
				<mx:LineSeries yField="Amount" form="curve" displayName="Amount"/>
			</mx:series>
		</mx:LineChart>
		<mx:HBox width="100%" horizontalAlign="center">
			<mx:Legend dataProvider="{linechart}" direction="horizontal" />
		</mx:HBox>
		
	</mx:Panel>
</s:Application>

  注:

@font-face {
  src:url("assets/font/arial.ttf"); //去C:/WINDOW/Fonts下边拷过来
  font-family: EmbeddedArial; 
   embedAsCFF:false;
  }

 

  • 大小: 57.5 KB
分享到:
评论

相关推荐

    Flex Chart 使用教程(含源代码)

    "FlexChart使用教程.doc"可能包含详细的步骤说明和代码示例,教你如何创建、配置和定制Flex Chart。而"FlexDemo"可能是一个实际的Flex项目,包含完整的MXML和ActionScript代码,供学习者参考和运行。 五、进阶技巧 ...

    flex chart

    标题 "flex chart" 指的是使用 Adobe Flex 技术创建的数据图表组件。Flex 是一个开源框架,主要用于构建富互联网应用程序(RIA),特别是在基于 Adobe Flash Player 或 Adobe AIR 的平台上。Flex Chart 是 Flex SDK ...

    flex Chart

    Flex Chart 是Adobe Flex框架中用于数据可视化的组件集,它提供了强大的图表绘制功能,使得开发者可以轻松地创建各种类型的图表,如柱状图、折线图、饼图、散点图等。在Flex 3中,Chart组件是MXML和ActionScript开发...

    flex 改变linechart datatips 显示样式代码

    本篇将详细介绍如何改变Flex LineChart的Datatips显示样式,包括字体大小以及自定义其他样式。 Flex中的Datatips默认样式可能不能满足所有设计需求,因此我们需要对其进行定制。首先,我们可以通过使用`...

    Flex chart line 线性表(单线和双线)

    此外,Flex Chart还支持各种其他类型的图表,如柱状图、饼图、面积图等,以及丰富的自定义选项,如添加图例、轴标签、数据提示等,以满足不同需求。 在压缩包文件"flex chart"中,可能包含了示例代码、FLA文件...

    Flex Chart+WebService<mxml源码>

    Flex Chart+WebService由于发布时没有注意,忘了把MXML的源码打包。webservice采用的是Myeclipse自带的XFIRES,可自行添加。

    FlexChart平均线代码

    2. **创建FlexChart对象**:在MXML或ActionScript中实例化FlexChart组件,并设置其类型为适合显示平均线的图表类型,如折线图。 3. **数据绑定**:将数据源绑定到图表的系列,让图表知道应该用哪些数据来绘制线条。...

    Flex Chart 图表3D展示

    Flex Chart 是Adobe Flex框架中的一种组件,用于创建各种数据可视化图表。在本示例中,我们关注的是"Flex Chart的3D展示",这表明它利用了Flex AS(ActionScript)语言来实现一种引人注目的3D效果。ActionScript是...

    去除flex chart 水印方法

    ### 去除Flex Chart水印方法 #### 知识点概述 在使用Flex Builder创建图表(Chart)的过程中,很多开发者会遇到一个普遍的问题:如何有效地去除试用版中的水印。Flex Builder作为Adobe推出的一款功能强大的开发...

    flex button的label字体垂直显示

    总结来说,实现`Flex Button`的`label`字体垂直显示主要涉及以下步骤: 1. 创建一个自定义样式表,定义`Button`的垂直文本样式。 2. 在应用中引用该样式表。 3. 可选地,创建一个自定义`Button`类,应用样式。 通过...

    FlexChart使用教程

    ### FlexChart使用教程详解 #### 一、Flex与RIA背景介绍 随着互联网技术的发展,用户对Web应用的要求越来越高,不仅需要高效稳定的功能性服务,还需要更丰富的用户体验。这就是所谓的RIA(Rich Internet ...

    Flex Chart+WebService

    标题中的“Flex Chart+WebService”指的是使用Adobe Flex技术来创建图表,并通过Web Service与服务器进行数据交互的一个示例项目。Flex是一种基于ActionScript 3.0的开源框架,用于构建富互联网应用程序(RIA)。它...

    FLEX时间轴代码

    在本文中,我们将深入探讨基于FLEX的时间轴代码实现,这是一种强大的可视化工具,常用于展示按时间顺序排列的数据。FLEX,全称为Flex,是Adobe公司开发的一种基于ActionScript的开源框架,主要用于构建富互联网应用...

    Flex LineChart

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

    Flex 使用中文设备字体 解决办法

    在开发Flex应用程序时,可能会遇到一个问题,即默认情况下,Flex使用的是英文字体,这在显示中文内容时可能会出现不匹配或显示不全的情况。这篇博文将深入探讨如何解决Flex中使用中文设备字体的问题,以确保正确显示...

    Flex漂亮的柱状图,横坐标倾斜45度显示amChart

    标题中提到的"Flex漂亮的柱状图,横坐标倾斜45度显示amChart",意味着我们将探讨如何在Flex中利用amChart库创建出具有倾斜横坐标轴的柱状图,同时保持良好的视觉效果和字符完整性,即使横坐标标签很长。 首先,让...

    flex 4 chart 控件

    Flex 4 Chart 控件是Adobe Flex框架中用于创建数据可视化的一种强大工具,它允许开发者创建出丰富、交互式且美观的图表。在Flex 4中,Chart组件是基于Flash Player运行时的,提供了多种图表类型,包括折线图、柱状图...

    Flex画 坐标轴曲线 项目用过的 flex4 开发

    4. **轴配置**:`horizontalAxis`和`verticalAxis`分别控制X轴和Y轴的显示。你可以定制轴的刻度、标签、范围等。例如,`CategoryAxis`适用于离散的类别数据,而`LinearAxis`则适用于连续的数值数据。 5. **样式与...

    flex LineChart

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

    Flex Chart Demo

    Flex Chart Demo是一个示例项目,展示了如何在Flex环境中利用图表组件进行数据可视化。Flex是Adobe开发的一款用于构建富互联网应用程序(RIA)的框架,而Flex Builder是它的集成开发环境(IDE),提供了图形化的用户...

Global site tag (gtag.js) - Google Analytics