`
ynp
  • 浏览: 437933 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

一个LineChart例子

XML 
阅读更多
<?xml version="1.0"?>
<!-- Simple example to demonstrate the HLOCChart control. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
    <mx:Script>
        <![CDATA[          
        import mx.collections.ArrayCollection;

        private var stockDataAC:ArrayCollection = new ArrayCollection( [
            { Date: "25-Jul", Open: 40.55,  High: 40.75, Low: 40.24, Close:40.31},
            { Date: "26-Jul", Open: 40.15,  High: 40.78, Low: 39.97, Close:40.34},
            { Date: "27-Jul", Open: 40.38,  High: 40.66, Low: 40, Close:40.63},
            { Date: "28-Jul", Open: 40.49,  High: 40.99, Low: 40.3, Close:40.98},
            { Date: "29-Jul", Open: 40.13,  High: 40.4, Low: 39.65, Close:39.95},
            { Date: "1-Aug", Open: 39.00,  High: 39.50, Low: 38.7, Close:38.6}, 
            { Date: "2-Aug", Open: 38.68,  High: 39.34, Low: 37.75, Close:38.84}, 
            { Date: "3-Aug", Open: 38.76,  High: 38.76, Low: 38.03, Close:38.12}, 
            { Date: "4-Aug", Open: 37.98,  High: 37.98, Low: 36.56, Close:36.69},                       
            { Date: "5-Aug", Open: 36.61,  High: 37, Low: 36.48, Close:36.86},
            
            { Date: "25-Jul", Open: 40.55,  High: 40.75, Low: 40.24, Close:40.31},
            { Date: "26-Jul", Open: 40.15,  High: 40.78, Low: 39.97, Close:40.34},
            { Date: "27-Jul", Open: 40.38,  High: 40.66, Low: 40, Close:40.63},
            { Date: "28-Jul", Open: 40.49,  High: 40.99, Low: 40.3, Close:40.98},
            { Date: "29-Jul", Open: 40.13,  High: 40.4, Low: 39.65, Close:39.95},
            { Date: "1-Aug", Open: 39.00,  High: 39.50, Low: 38.7, Close:38.6}, 
            { Date: "2-Aug", Open: 38.68,  High: 39.34, Low: 37.75, Close:38.84}, 
            { Date: "3-Aug", Open: 38.76,  High: 38.76, Low: 38.03, Close:38.12}, 
            { Date: "4-Aug", Open: 37.98,  High: 37.98, Low: 36.56, Close:36.69},                       
            { Date: "5-Aug", Open: 36.61,  High: 37, Low: 36.48, Close:36.86} ]); 
           
           	[Bindable] 
            private var tempstockDataAC:ArrayCollection ;
            [Bindable] 
            private var dataLength:int;
            
            private function init():void{
            	tempstockDataAC = new ArrayCollection(stockDataAC.source);
            	dataLength = stockDataAC.length-1;
            	slider.values[1] = dataLength;
            }
            
            private function rangeChange():void{
            	if(stockDataAC != null && stockDataAC.length!=0){
	            	var tempNum:Number = slider.value;
	            	tempstockDataAC.source = stockDataAC.toArray().slice(slider.values[0],slider.values[1]+1);
            	}
            }
            
            private function getSliderLabel(value:String):String{
	            return stockDataAC[parseInt(value)].Date;
        	}    
        ]]>
    </mx:Script>

	<mx:LineChart id="lineChart" styleName="lineChart"  showDataTips="true" dataProvider="{tempstockDataAC}" fontSize="12" width="952.5" height="260" y="40" x="17.5" selectionMode="single">
		<!--网格-->
		<mx:backgroundElements> 
            <mx:GridLines id="gridLines" direction="both"> 
                <mx:horizontalStroke> 
                    <mx:Stroke color="black" weight="0" alpha="1.0" /> 
                </mx:horizontalStroke> 
                <mx:verticalFill> 
                    <mx:SolidColor color="haloBlue" alpha="0.2" /> 
                </mx:verticalFill> 
<!--                <mx:verticalAlternateFill> 
                    <mx:SolidColor color="haloSilver" alpha="0.2" /> 
                </mx:verticalAlternateFill> -->
            </mx:GridLines> 
        </mx:backgroundElements> 
        <!--纵坐标-->
		<mx:verticalAxis>
			<mx:LinearAxis baseAtZero="false"  minimum="{35}" maximum="{42}" interval="{1}" minorInterval="{0.2}" title="监测值" /> <!-- baseAtZero 是否从0显示;实际应用最好去掉minimum="{35}" maximum="{42}",自动设定最大最小值;-->
		</mx:verticalAxis>
		<!--横坐标-->
   		<mx:horizontalAxis>
            <mx:CategoryAxis id="haxis" categoryField="Date" title="日期" />
         </mx:horizontalAxis>
		<mx:series>
			<mx:LineSeries yField="Open" displayName="数据" form="segment"><!--form显示曲线样式-->
				<mx:lineStroke>
					<mx:Stroke color="haloGreen" weight="10"/> <!--设置曲线宽度和颜色-->
				</mx:lineStroke>
			</mx:LineSeries>
		</mx:series>
		
       <mx:horizontalAxisRenderers> 
            <mx:AxisRenderer axis="{haxis}" 
                    canDropLabels="true" /> 
        </mx:horizontalAxisRenderers> 	
	
<!--		<mx:seriesFilters>
			<mx:Array />
		</mx:seriesFilters>-->
	</mx:LineChart>
	
	<mx:ControlBar> <!--图例-->
		<mx:Legend id="legend" dataProvider="{lineChart}" alpha="0.5"/>	
	</mx:ControlBar>
    <mx:HSlider id="slider" width="150" thumbCount="2" snapInterval="1" minimum="5" maximum="{dataLength}"
    	dataTipFormatFunction="getSliderLabel"
    	change="rangeChange()"/>
</mx:Application>
分享到:
评论

相关推荐

    flex 改变linechart datatips 显示样式代码

    Datatips是LineChart中的一个重要特性,它会在鼠标悬停在数据点上时显示相关信息。本篇将详细介绍如何改变Flex LineChart的Datatips显示样式,包括字体大小以及自定义其他样式。 Flex中的Datatips默认样式可能不能...

    linechart.rar

    总的来说,"linechart.rar"项目是一个学习和实践Vue.js与canvas结合的好例子,它揭示了如何在不依赖高级图表库的情况下,利用JavaScript基础和前端框架的特性来创建自定义的交互式图表。对于想要深入理解前端图形...

    android 绘制折线图(AChartEngine)Linechart 动态更新横轴为获取的当前时间

    `AChartEngine`是一个强大的开源库,专为Android设计,它允许开发者轻松地创建各种图表,包括折线图、饼图、条形图等。本文将详细介绍如何使用`AChartEngine`库来创建一个动态更新横轴为当前时间的折线图。 首先,...

    一个C#的Chart控件例子

    本示例是一个适合初学者掌握的`Chart`控件使用案例,通过这个例子,我们可以学习到如何在C#应用中集成并操作`Chart`控件,以实现数据的直观展示。 首先,`Chart`控件是.NET Framework提供的一种Windows Forms组件,...

    Chart Control 例子:所有 35 种基本图表例子

    Chart Control 例子:所有 35 种基本图表例子。 开发环境:Visual Studio 2010 开发平台:.Net Framework 4.0 代码语言:C Sharp, Visual Basic 参考代码下载地址:http://code.msdn.microsoft.com/mschart 把注释...

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

    对于双线图表,我们需要两个`LineSeries`,并将它们添加到同一个`LineChart`中: ```xml &lt;mx:LineChart id="doubleLineChart" dataProvider="{dataDouble}"&gt; 线1数据" /&gt; 线2数据" /&gt; &lt;/mx:LineChart&gt; ``` ...

    chart line 拖拽

    在上述代码中,我们创建了一个名为lineChart的Chart控件,并添加了一个LineSeries,数据源绑定到DataPoints集合,X轴和Y轴分别对应数据点的X和Y值。 接下来,我们需要添加鼠标事件处理程序以实现拖拽功能。在后台...

    C1Chart控件例子

    每个扇形代表数据的一个类别,其大小表示该类别的占比。通过`Labels`属性可以添加类别标签,`LabelFormat`则用于自定义标签的显示格式。 三、折线图(Line Chart) 折线图用于展示数据随时间变化的趋势,常用于经济...

    WebChart 几个简单的例子 有源码

    在本文中,我们将探讨WebChart库的使用,它是一个用于创建柱状图和线形图的工具。通过提供的代码示例,我们可以看到如何利用WebChart创建具有不同特性的图表,如颜色、阴影和图例。 首先,我们看到`...

    微软Chart控件示例

    首先,Chart控件是一个灵活的组件,它可以生成各种类型的图表,如折线图、柱状图、饼图、散点图等,适用于数据分析、报告展示等多种场景。在ASP.NET中,可以通过拖放方式将Chart控件添加到网页设计界面,然后在后台...

    delphi Chart使用例子

    TeeChart 是一个在 Delphi 中广泛使用的图表组件库,它提供了丰富的图形类型和功能,帮助开发者创建出直观、美观的数据可视化应用。本篇文章将详细介绍如何在 Delphi H7(可能是 Delphi XE7 或更高版本)中使用 ...

    chart c# 例子

    `Chart C#` 是微软.NET Framework中的一部分,提供了强大的图表制作功能,适用于Windows应用程序。本篇将深入探讨`Chart`控件的使用,包括柱状图、饼图和折线图这三种常用的统计图类型,并结合实例进行讲解。 首先...

    少儿编程Scratch第23讲: 数据可视化:线图V1.0- 列表、图章、画笔、滑行(Line Chart).pdf

    【少儿编程Scratch第23讲】主要讲解的是如何利用Scratch进行数据可视化,特别是创建线图(Line Chart)的方法。线图是一种常见的数据展示方式,尤其适合展示数据随时间的变化趋势。在这个教程中,作者选择了北京12...

    安卓折线图饼状图例子

    `MPAndroidChart`是一个非常流行的开源库,它为Android提供了丰富的图表功能,包括折线图、饼状图、柱状图等。在这个例子中,我们将重点关注"安卓折线图饼状图例子",它利用`MPAndroidChart`库来创建易于理解的图形...

    基于Chart.js的折线图例子

    **基于Chart.js的折线图例子** ...总的来说,Chart.js是一个强大且易于使用的图表库,可以帮助开发者快速构建美观的可视化界面。通过理解其基本用法和注意事项,可以灵活地应用于各种项目,满足不同的数据展示需求。

    LinechartTool.zip

    在IT领域,动态折线图是一种常见的数据可视化方式,它能够直观地展示随时间变化的趋势。本项目"LinechartTool.zip"聚焦...这不仅是一个学习和实践多领域技术的好例子,也是一个适用于多种实时数据监控场景的实用工具。

    Pyecharts50个例子

    Pyecharts,作为Python中的一个Echarts图表库,是数据可视化领域的一把利器。它为Python开发者提供了丰富的Echarts图形接口,使得在Python环境中创建交互式、美观的数据可视化作品变得轻而易举。本文将基于...

    android,实时曲线例子

    在这个例子中,可能会有一个`MyChartTestActivity`或者`MyChartTestFragment`,里面包含一个`LineChart`对象。布局文件中的XML部分可能如下所示: ```xml &lt;com.github.mikephil.charting.charts.LineChart android...

    androidLineGraphic

    首先,我们需要了解Android中常用的图形库,如`MPAndroidChart`,这是一个强大的开源库,支持多种类型的图表,包括折线图(LineChart)。要使用这个库,你需要将其依赖添加到你的项目中。在`build.gradle`(Module: ...

    PyPI 官网下载 | life_line_chart-1.2.8.tar.gz

    在本讨论中,我们将聚焦于一个名为"life_line_chart"的库,其版本为1.2.8,压缩包文件为"life_line_chart-1.2.8.tar.gz"。这个库专门用于绘制生命周期图表,帮助数据分析师和可视化爱好者直观地展示和理解数据随时间...

Global site tag (gtag.js) - Google Analytics