`
sorehead
  • 浏览: 47638 次
  • 性别: Icon_minigender_2
  • 来自: 达纳苏斯
社区版块
存档分类
最新评论

Flex中如何通过horizontalStroke样式,自定义LineChart图表水平网格颜色

阅读更多
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white" viewSourceURL="srcview/index.html">

    <mx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;

            private function colorPicker_change(evt:ColorPickerEvent):void {
                var stroke:Stroke = new Stroke(evt.color, 0, 1.0);
                gridLines.setStyle("horizontalStroke", stroke);
            }
        ]]>
    </mx:Script>

    <mx:XMLListCollection id="dp">
        <mx:source>
            <mx:XMLList>
                <quote date="8/27/2007" open="40.38" close="40.81" />
                <quote date="8/24/2007" open="40.5" close="40.41" />
                <quote date="8/23/2007" open="40.82" close="40.6" />
                <quote date="8/22/2007" open="40.4" close="40.77" />
                <quote date="8/21/2007" open="40.41" close="40.13" />
                <quote date="8/20/2007" open="40.55" close="40.74" />
                <quote date="8/17/2007" open="40.18" close="40.32" />
                <quote date="8/16/2007" open="39.83" close="39.96" />
                <quote date="8/15/2007" open="40.22" close="40.18" />
                <quote date="8/14/2007" open="41.01" close="40.41" />
                <quote date="8/13/2007" open="41" close="40.83" />
                <quote date="8/10/2007" open="41.3" close="41.06" />
                <quote date="8/9/2007" open="39.9" close="40.75" />
                <quote date="8/8/2007" open="39.61" close="40.23" />
                <quote date="8/7/2007" open="39.08" close="39.42" />
                <quote date="8/6/2007" open="38.71" close="39.38" />
                <quote date="8/3/2007" open="39.47" close="38.75" />
                <quote date="8/2/2007" open="39.4" close="39.52" />
                <quote date="8/1/2007" open="40.29" close="39.58" />
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="Stroke color:" />
        <mx:ColorPicker id="colorPicker" change="colorPicker_change(event);" />

        <mx:Spacer width="100%" />

        <mx:Legend dataProvider="{lineChart}"
                direction="horizontal" />
    </mx:ApplicationControlBar>

    <mx:LineChart id="lineChart"
            showDataTips="true"
            dataProvider="{dp}"
            width="100%"
            height="100%">

        <mx:backgroundElements>
            <mx:GridLines id="gridLines" direction="horizontal">
                <mx:horizontalStroke>
                    <mx:Stroke color="black" weight="0" alpha="1.0" />
                </mx:horizontalStroke>
            </mx:GridLines>
        </mx:backgroundElements>

        <!-- vertical axis -->
        <mx:verticalAxis>
            <mx:LinearAxis baseAtZero="false" title="Price" />
        </mx:verticalAxis>

        <!-- horizontal axis -->
        <mx:horizontalAxis>
            <mx:CategoryAxis id="ca" categoryField="@date" title="Date" />
        </mx:horizontalAxis>

        <!-- horizontal axis renderer -->
        <mx:horizontalAxisRenderers>
            <mx:AxisRenderer axis="{ca}" canDropLabels="true" />
        </mx:horizontalAxisRenderers>

        <!-- series -->
        <mx:series>
            <mx:LineSeries yField="@open" displayName="Open" />
        </mx:series>
    </mx:LineChart>

</mx:Application>

 

分享到:
评论

相关推荐

    flex LineChart实例

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

    flex 当天24小时曲线统计

    6. 自定义样式:Flex提供丰富的样式和皮肤定制功能,可以调整曲线颜色、点的形状、网格线、标题等元素,以达到更好的视觉效果。 7. 性能优化:对于大量数据,需要考虑性能问题,如数据分段加载、数据聚合等策略。 ...

    flex动态生成datagrid表头

    关于“linechart的简单操作”,LineChart是Flex中用于展示趋势数据的图表组件。以下是如何创建和使用的基本步骤: 1. **创建LineChart对象**:同样,在MXML或ActionScript中创建LineChart实例。 ```xml &lt;mx:Line...

    flex3动态创建[参考].pdf

    - `mx:PieChart`, `mx:ColumnChart`, `mx:BarChart`, 和 `mx:LineChart` 是不同类型的图表组件,它们可以通过数据集展示数据。 - `cbChartType` 的数据提供者允许用户在不同的图表类型间切换。 4. **颜色选择器和...

    使用 Flex3 开发 OLAP 应用

    使用Flex中的图表控件可以通过两种方式实现: 1. **直接在MXML文件中通过XML标签配置**:这种方式比较直观,适合简单的应用场景。 2. **通过ActionScript编程实现**:这种方式更为灵活,可以更好地控制数据的获取和...

    Felx 报表

    `mx:ColumnChart`、`mx:LineChart`和`mx:PieChart`等类提供了丰富的图表选项,可以创建出美观且信息丰富的可视化效果。此外,`mx:Legend`和`mx:Axis`等组件则帮助我们更好地组织和解释数据。 分页和过滤是大型数据...

    flex入门

    - **组件**:MXML文件中的元素通常对应于Flex组件,如`&lt;Button&gt;`、`&lt;DataGrid&gt;`和`&lt;LineChart&gt;`,这些组件可以方便地在界面上创建交互元素。 - **属性**:每个组件都有自己的属性,如`label`、`dataProvider`和`...

    Flex常见效果

    `&lt;mx:AxisRenderer&gt;`是图表轴的渲染器,用于自定义坐标轴的样式和布局。 ##### 3. BarChart `&lt;mx:BarChart&gt;`柱状图,适用于比较不同类别的数值差异。 ##### 4. BubbleChart `&lt;mx:BubbleChart&gt;`气泡图,用于显示三...

    Flex UI组件使用全集

    - **LineChart**: 折线图。 - **LogAxis**: 对数轴。 - **PieChart**: 饼图。 以上列出的只是部分Flex UI组件,这些组件为开发者提供了广泛的选择,使得创建复杂且美观的应用程序成为可能。理解这些组件的功能和...

    C#开发控件命名规则

    - `ms flex grid`(MS灵活网格):`msgClients` - `ms tab`(MS选项卡):`mstFirst` - `ole container`(OLE容器):`oleWorksheet` - `op...`(未提供完整信息的控件):需要根据具体功能进行命名。 通过遵循...

Global site tag (gtag.js) - Google Analytics