`

flex中定制linechart等图表坐标轴线条粗细、颜色

    博客分类:
  • flex
 
阅读更多

应用需要,希望将坐标轴的刻度线颜色进行修改定制,但是晚上搜了一通,没找到答案,反复研究帮助文档等资料,发现其实很简单,就是自己指定AxisRenderer代替默认的就可以了

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12" horizontalScrollPolicy="off" verticalScrollPolicy="off" initialize="onInit(event)">
<!-- 定制线条样式. -->
<mx:Stroke id="chartStroke" color="0xE48701" weight="1"/>
<!-- 定制坐标轴样式. -->
<mx:Stroke id="chartAxisStroke" color="0x000000"/>
<mx:Stroke id="chartAxisStrokeThick" caps="square" color="0x666666" weight="6" />
<mx:VBox percentWidth="100" percentHeight="100">
<mx:LineChart id="chart" x="0" y="0" percentWidth="100" percentHeight="100" showDataTips="true" dataTipFunction="{chartDataTipProc}">
<mx:backgroundElements>
<!-- 定制图表水平网格线 -->
<mx:GridLines id="gridLines" direction="horizontal">
<mx:horizontalStroke>
<mx:Stroke color="#AAAAAA" weight="1" alpha="1" />
</mx:horizontalStroke>
</mx:GridLines>
</mx:backgroundElements>
<mx:horizontalAxis>
<mx:DateTimeAxis id="chartXAxis" dataUnits="hours" labelFunction="{chartDateAxisLabelProc}" parseFunction="{chartDateParseProc}" />
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<!-- 定制横坐标 -->
<mx:AxisRenderer axis="{chartXAxis}" axisStroke="{chartAxisStroke}" color="#000000" tickStroke="{chartAxisStroke}" />
</mx:horizontalAxisRenderers>
<mx:verticalAxis>
<mx:LinearAxis id="chartYAxis" autoAdjust="false" baseAtZero="false" padding="0" title="水位(m)" />
</mx:verticalAxis>
<mx:verticalAxisRenderers>
<!-- 定制纵坐标 -->
<mx:AxisRenderer axis="{chartYAxis}" axisStroke="{chartAxisStrokeThick}" color="#000000" tickStroke="{chartAxisStroke}" />
</mx:verticalAxisRenderers>
<mx:series>
<mx:LineSeries id="chartSeries" xField="TM" yField="VAL" form="curve" displayName="" lineStroke="{chartStroke}" radius="3"
itemRenderer="mx.charts.renderers.CircleItemRenderer" showDataEffect="{chartEffectZoom}" />
</mx:series>
</mx:LineChart>
</mx:VBox>
</mx:Application>

分享到:
评论

相关推荐

    flex 改变linechart datatips 显示样式代码

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

    flex LineChart

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

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

    在Flex中,LineChart组件可以创建简单的线条图,也可以包含多个系列,每个系列由不同的颜色表示。线的形状、点的样式、数据标记等都可以进行自定义。 这些图表组件在Flex中通常与数据提供者结合使用,数据提供者...

    flex LineChart实例

    根据提供的文件信息,我们可以从标题、描述以及部分代码中提炼出与Flex LineChart相关的知识点。 ### Flex LineChart实例 #### 标题理解 标题“Flex LineChart实例”明确指出这是一个关于Flex框架下的线形图(Line...

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

    5. **样式与交互**:Flex4允许对图表进行高度定制,包括线条颜色、点标记、数据提示等。你还可以添加鼠标悬停、点击事件监听器,实现数据点的高亮、详情显示等功能,增强用户的交互体验。 6. **性能优化**:对于大...

    Flex LineChart

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

    flex Chart

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

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

    Flex Chart Line是Adobe Flex框架中的一个关键组件,用于创建数据可视化图表,特别是线性图表。在本场景中,我们关注的是“单线”和“双线”两种类型的线性图表。Flex 4.5是Adobe Flex SDK的一个版本,它提供了更...

    Flex_4系统组件:图表

    这些图表组件都提供了丰富的定制选项,包括但不限于颜色、样式、标签、数据列、轴格式化、交互行为等。开发者可以通过XML或ActionScript代码来配置和控制图表。例如,可以设置数据系列、添加数据点、定义轴的范围和...

    flex_linechart

    flex项目开发过程中的动态linechart,主要是曲线可以增量的刷新,纵坐标、刷新频率可以调整,也可以稍微改下根据配置进行曲线设置,这个是少了获取数据的方法用随机数代替,项目中用到动态linechart的可以参考。

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

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

    Flex Chart 图表3D展示

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

    Flex BlazeDs 推数据生成lineChart实例

    在本实例中,lineChart是Flex中的一个图表组件,能够用来显示时间序列数据,非常适合用于展示随时间变化的趋势。 BlazeDS是Adobe提供的一种服务器端技术,主要用于实现Flex应用程序与Java应用程序之间的通信。它...

    flex做的四种图表(线、柱、饼、区域)直接用js调用

    在Flex中,可以使用mx.charts.LineChart类来创建线图,通过设置series属性添加数据系列,利用dataProvider绑定数据源,还可以自定义轴刻度、图例、颜色等视觉元素。 柱状图则常用于比较不同类别的数据量。Flex中的...

    flex chart

    在创建图表时,首先需要准备数据源,然后通过 MXML 或 ActionScript 配置和定制图表的样式、颜色、标签等属性。例如,你可以设置图表的标题、轴标签、数据系列、数据点的形状和颜色等。 标签 "源码" 暗示这篇博文...

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

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

    flex线状图表展示源码

    在Flex中,可以使用MX或Spark组件库中的Chart组件来创建图表。MX Chart组件提供了一套完整的图表类型,包括线形图。在源码中,开发者可能已经定义了数据提供者、设置了X轴和Y轴的属性,并定制了图表的样式和交互行为...

    flex柱状图表很漂亮的源码

    2. **Chart组件**:在Flex中,使用`mx.charts.Chart`(Halo)或`s.spark.components.Chart`(Spark)作为图表容器。你可以设置其属性,如背景颜色、标题、图例等。 3. **Series**:柱状图通常由一个或多个Series...

    ArcGIS教程:Flex制作直观的交互式图表

    图表负责定义数据源、图表类型、数据提示、数据流样式以及坐标轴样式等。而序列则指定数据源中哪些数据会在图表上显示,并设定数据走势、填充和皮肤。例如,一个图表可能对应一个图表控件类和一个或多个图表序列类。...

Global site tag (gtag.js) - Google Analytics