`
ynp
  • 浏览: 429133 次
  • 性别: 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>
分享到:
评论

相关推荐

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

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

    SwiftUICharts-使用SwiftUI绘制简单,动画的图表-Swift开发

    当它们的数据更改时,会设置动画的ColumnChart,BarChart,LineChart和PieChart。 这些图表的数据是代表百分比的Double值数组。 为了使事情变得容易一些,有一个ChartModel可以使用Double的任何数组并将其转换为百分...

    Android例子源码基于achartengine引擎的中文注释图表

    AChartEngine 是一个安卓系统上制作图表的框架,目前它支持如下的图表类型:range (high-low) bar chart (范围条形图)、dial chart / gauge (拨号盘/压力表)、combined (any combination of line, cubic line, ...

    Android例子源码基于achartengine引擎的中文注释图表.zip

    AChartEngine 是一个安卓系统上制作图表的框架,目前它支持如下的图表类型:range (high-low) bar chart (范围条形图)、dial chart / gauge (拨号盘/压力表)、combined (any combination of line, cubic line, ...

    Eclipse开发Flex新手必学例子(后台数据页面显示N种图表)

    关于Flex中各种图形的例子 LineChart Columnchart Areachart Bubblechart Barchart 的例子 数据从后台的Java类获取 也可以从数据库获取

    JqueryChart,js图表,附例子

    这次正好要用到折线图显示车辆油量消耗的情况,但是由于数据量过大导致没事点之间显示的数值密密麻麻根本看不清,于是看了源代码新加了一个 improveline,这个折线图只会显示你要显示的点数据,不会全部显示点。...

    EXCEL 2007 宝典 附光盘文件

    line charts.xlsx:一个包含折线图例子的工作簿。 pie charts.xlsx:一个包含饼图例子的工作簿。 radar charts.xlsx:一个包含雷达图例子的工作簿。 six chart types.xlsx:一个使用6种图表类型显示相同区域的...

    FlexLineChartX轴文字竖排

    不用另外的子题库,将LineChart的文字进行竖排,很简单的例子

    amchart -2 Line & Area(flash chart 图表)

    Line & Area图 解压后看例子,注册码文件需要另外下载,本人上传资源里有,欢迎下载。

    SwiftCharts:适用于 Mac 和 iOS 的简单、性感的折线图

    SwiftCharts 是一个轻量级的折线图“库”(未来还会有更多!)。 let view = LineChartView () view. lineChart . datasets = [ LineChart. Dataset ([ 3.0 , 4.0 , 9.0 , 11.0 , 15.0 , 13.0 ]) ] 安装 仅下载...

    jfreechart-1.0.19-demo-src

    jfreechart-1.0.19压缩包中有一个jfreechart-1.0.19-demo.jar,里面演示了各种图表的制作案例,包括BarChart、LineChart、PieChart、TimeSeriesChart、XYSeries等等,共309个例子,现开放源码,请各位下载,欢迎交流...

    Android例子源码基于Java和Android开发的图形图表控件

    目前该套图表主要包括以下组件: 网格图(gird chart) 线图(line charts),包含单线图和多线图 柱状图(stick charts),包含基本柱状图和特殊柱状图 支持显示均线 K线或蜡烛线图(candle stick-chart) 支持显示均线 ...

    安卓折线图饼状图例子

    MPAndroidChart开源库图表之折线图的实例代码,例子很容易地调用到开源项目里面的主要类和方法,用途很大适合大部分开发者使用。

    Android例子源码基于Java和Android开发的图形图表控件.zip

    目前该套图表主要包括以下组件: 网格图(gird chart) 线图(line charts),包含单线图和多线图 柱状图(stick charts),包含基本柱状图和特殊柱状图 支持显示均线 K线或蜡烛线图(candle stick-chart) 支持显示均线 ...

    chartjs-plugin-crosshair:ChartJS的Crosshair插件

    例子 new Chart ( ctx , { // ... data ... options : { // ... other options ... tooltips : { mode : 'interpolate' , intersect : false } , plugins : { crosshair : { line : { color : '#F66' , /...

    Flex课程学习(附带源码)

    A、 Application/WebService/Button/DataGrid/LineChart MXML组件 B、 id="ws" MXML 组件的id C、 click="ws.getProducts()" MXML组件的事件 D、 dataProvider="{ws.getProducts..}" MXML 的绑定 5、MXMLC ...

    chartjs-card:家庭助理的Chart.js卡

    chartjs卡 家庭助理的Chart.js卡 通过HACS安装 该卡不在HACS中,但是您可以通过Custom repositories...chart : bar # Supports: ['line', 'radar', 'bar', 'horizontalBar', 'pie', 'doughnut', 'polarArea', 'bubble',

    Visual C++ 6.0程序设计实训教程源码

    解压缩后共4.9MB,包含了10个完美详细的例子源码:1.FileIO 2.Draw 3.Student(学生信息管理系统数据库应用) 4.Explore(制作IE) 5.SimpleCAI (函数参数值传递与地址传递区别的Demo演示)6.LineChart 7.DirDialog 8....

    sparkline:轻巧的Rea​​ct迷你图:chart_increasing::chart_increasing:

    轻巧的Rea​​ct迷你图 :sparkles: :chart_increasing: 安装 yarn add @rowno/sparkline # or npm install --save @rowno/sparkline 例子 function Spark ( ) { const lines = [ { values : [ 789 , 880 , 676 ,...

    amline的折线图操作代码

    用flash做的显示web图标的功能.这个是折线图的演示. 效果非常好. 而且这个例子将flash左上角的厂家链接也隐藏了.

Global site tag (gtag.js) - Google Analytics