效果图:
LineChart文件内容:
<?xml version="1.0" encoding="utf-8"?>
<s:VGroup gap="0" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
<fx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
import mx.collections.ArrayCollection;
import spark.components.CheckBox;
public static const VERTICALAXISLEFT:String = 'verticalAxisLeft';
public static const VERTICALAXISRIGHT:String = 'verticalAxisRight';
[Bindable]
/* 数据源 */
private var _dataProvider:ArrayCollection;
[Bindable]
/* 水平轴上的绑定字段 ,默认空*/
private var _categoryField:String = '';
[Bindable]
/* 水平轴上的标题 ,默认空*/
private var _title:String = '';
[Bindable]
/* 是否显示左边的刻度线,默认true */
private var _calibrationLeft:Boolean = true;
[Bindable]
/* 是否显示右边的刻度线,默认false */
private var _calibrationRight:Boolean = false;
[Bindable]
/* 在垂直轴上显示的内容,可多个 ,格式 {yField:'字段',displayName:'提示标题',align:}*/
private var _lineSeriesArray:Array;
public function set dataProvider(value:ArrayCollection):void {
_dataProvider = value;
}
public function set categoryField(value:String):void {
_categoryField = value;
}
public function set title(value:String):void {
_title = value;
}
public function set calibrationRight(value:Boolean):void {
_calibrationRight = value;
}
public function set calibrationLeft(value:Boolean):void {
_calibrationLeft = value;
}
public function set lineSeriesArray(value:Array):void {
_lineSeriesArray = value;
if (_lineSeriesArray) {
var check:CheckBox;
var target:mx.charts.LineChart = mx.charts.LineChart(this.getChildAt(1));
colorList.removeAll();
while (_lineSeriesArray.length > 0) {
var item:Object = _lineSeriesArray.pop();
var series:LineSeries = new LineSeries;
series.horizontalAxis = h1;
series.yField = item.yField;
series.displayName = item.displayName;
if (item.align == VERTICALAXISLEFT) {
series.verticalAxis = v1;
} else if (item.align == VERTICALAXISRIGHT) {
series.verticalAxis = v2;
}
var storkt:SolidColorStroke = new SolidColorStroke();
//随机生成颜色colorArr[i]
storkt.color = bulidColor();
storkt.weight = 1;
series.setStyle("lineStroke", storkt);
target.series.push(series);
target.series = target.series;
check = new CheckBox;
check.setStyle('color', storkt.color);
check.label = item.displayName;
check.selected = true;
tools.addElement(check);
BindingUtils.bindProperty(series, 'visible', check, 'selected');
BindingUtils.bindProperty(series, 'includeInLayout', check, 'selected');
}
}
}
private var source:Array = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', 'A', 'B', 'C', 'D', 'E', 'F'];
private var colorList:ArrayCollection = new ArrayCollection;
private function bulidColor():uint {
var color:String = '0x';
var index:Number;
for (var i:int = 0; i < 6; i++) {
//0-15之间的随机数,不包含15
index = Math.round(Math.random() * 15);
color += source[index];
}
if (colorList.contains(color)) {
bulidColor();
} else {
colorList.addItem(color);
}
return mx.core.Singleton.getInstance("mx.styles::IStyleManager2").getColorName(color);
}
]]>
</fx:Script>
<s:HGroup id="tools" gap="15" width="100%" horizontalAlign="center" verticalAlign="middle" height="30"/>
<mx:LineChart seriesFilters="[]" dataProvider="{_dataProvider}" showDataTips="true" width="100%" height="100%">
<!--backgroundElements:背景设置-->
<mx:backgroundElements>
<mx:GridLines horizontalTickAligned="false" verticalTickAligned="false">
<mx:verticalStroke>
<mx:SolidColorStroke id="ss" color="#a6cecd" weight="1" alpha="0.4"/>
</mx:verticalStroke>
<mx:horizontalStroke>
<mx:SolidColorStroke color="#a6cecd" weight="1" alpha="0.6"/>
</mx:horizontalStroke>
</mx:GridLines>
</mx:backgroundElements>
<!--categoryField:横坐标数据节点-->
<mx:horizontalAxis>
<mx:CategoryAxis id="h1" categoryField="{_categoryField}" title="{_title}"/>
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer placement="bottom" axis="{h1}"/>
</mx:horizontalAxisRenderers>
<!--纵坐标-->
<mx:verticalAxisRenderers>
<mx:AxisRenderer axisStroke="{ss}" placement="left" axis="{v1}" visible="{_calibrationLeft}"
includeInLayout="{_calibrationLeft}"/>
<mx:AxisRenderer axisStroke="{ss}" placement="right" axis="{v2}" visible="{_calibrationRight}"
includeInLayout="{_calibrationRight}"/>
</mx:verticalAxisRenderers>
<mx:series>
<!--纵坐标轴1-->
<mx:LineSeries id="w__sasfw" horizontalAxis="{h1}" visible="false" includeInLayout="false">
<mx:verticalAxis>
<mx:LinearAxis id="v1" title=""/>
</mx:verticalAxis>
</mx:LineSeries>
<!--纵坐标轴2-->
<mx:LineSeries horizontalAxis="{h1}" visible="false" includeInLayout="false">
<mx:verticalAxis>
<mx:LinearAxis id="v2" title=""/>
</mx:verticalAxis>
</mx:LineSeries>
</mx:series>
</mx:LineChart>
</s:VGroup>
测试文件内容:
<?xml version="1.0" encoding="utf-8"?>
<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" minWidth="955" minHeight="600" xmlns:charts="com.charts.*">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
[Bindable]
private var expensesAC:ArrayCollection = new ArrayCollection([{Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450}, {Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600}, {Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300}, {Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900}, {Month: "May", Profit: 2400, Expenses: 575, Amount: 500}]);
override protected function createChildren():void {
addEventListener(FlexEvent.APPLICATION_COMPLETE, function(e:FlexEvent):void {
var source:Array = [{yField: 'Profit', displayName: '利润', align: LineChart.VERTICALAXISLEFT}, {yField: 'Expenses', displayName: '开支', align: LineChart.VERTICALAXISLEFT}, {yField: 'Amount', displayName: '金额', align: LineChart.VERTICALAXISRIGHT}];
chart.lineSeriesArray = source;
});
super.createChildren();
}
]]>
</fx:Script>
<!-- Define custom colors for use as fills in the AreaChart control. -->
<charts:LineChart id="chart" width="100%" height="100%" calibrationRight="true" dataProvider="{expensesAC}" categoryField="Month"
title="这是测试,可以改啊"/>
</s:Application>
分享到:
相关推荐
Error occured at:2014-03-24 11:42:24 Line no.:85 Error Code: 2006 - MySQL server has gone away 最终找到原因,原来是MySQL导入大批量数据的时候超出了默认允许最大的数据包所以就提示2006 – MySQL server ...
Android-LineChart 介绍 一个简单的折线,贝塞尔曲线图表控件,高度可扩展,支持动态显示。 效果图 使用 设置布局 2. 添加数据 ```Java lineChartView.setData(datas); 修改Y轴标尺间隔 lineChartView....
参数列表:-1, --oneline: display one entry per line-a, --all: show dot files-b, --binary: use binary (power of two) file sizes-B, --bytes: list file sizes in bytes, without prefixes-d, --list-dirs: ...
Line 80: 06-09 14:41:35.020: D/SystemServerInitThreadPool(1450): Started executing prepareAppData Line 107: 06-09 14:41:35.182: D/SystemServerTiming(1450): StartPackageManagerService took to ...
小熊电器-002959-公司深度报告:进击的小熊,会成为小家电的LineFriends吗?
20201119-信达证券-小熊电器-002959-公司深度报告:进击的小熊,会成为小家电的LineFriends吗?.rar
line-bot-api-client:Messaging API的API客户端库 line-bot-model:Messaging API的模型类 line-bot-servlet:bot服务器的Java servlet实用程序 line-bot-spring-boot:bot服务器的Spring Boot自动配置库 该项目...
大家经常用的css3属性text-overflow是针对单行文本溢出的操作,那块级元素的文本溢出要怎样处理呢? 需要用到-webkit-line-clamp:
2008-06-26 17:09:29 @5-CONFIG:Configured from outband wde(config)#vlan 10 2008-06-26 17:09:34 @5-CONFIG:Configured from outband wde(config-vlan)#end 2008-06-26 17:09:38 @5-CONFIG:Configured from ...
NOI在线能力测试【提高组】-3月7日8:30-12:00
C# 画图,画线,源码,简化C#作图过程,编译后文件名LineChart
您可以通过npm或yarn命令从NPM注册表中下载react-svg-line-chart yarn add react-svg-line-chart npm install react-svg-line-chart --save 如果您不使用包管理器,并且想直接在html中包含react-svg-line-chart ...
在单个图表中创建多条线,每条线都有自己的颜色, 使用...echo $ linechart -> addMarkers ([ 1 , 2 , 3 , 4 , 5 , 6 ])-> addPoint ( 4 , 2 )-> chart (); 这将以默认颜色打印一个带有单个点的简单图表。高级输出:
实现了折线图的实时动态更新,可以自定义X轴坐标,可是设置Y坐标的最大值和最小值,android 绘制折线图(AChartEngine)Linechart 动态更新横轴为获取的当前时间
名称:Audio Recorder Online -------------------- 版本:0.1 作者:Curt Norval 分类:其他 -------------------- 概述:“Audio Recorder Online”是一个允许您使用计算机麦克风录制音频的程序。 描述: “...
:chart_increasing_with_yen: :chart_increasing:使用html5画布构建的轻量级K线图。 :package:安装 使用npm npm install klinecharts --save 使用纱 yarn add klinecharts CDN :page_facing_up:文件 :hammer_...
命令:insert into about values('xyw1026','laojiang'); 退出 命令:exit JSP连接mysql 在C:\Program Files\Apache Software Foundation\Tomcat5.5\webapps目录下建立子目录myapp 进入C:\Program Files\Apache...
适用于Node.js的LINE Messaging API SDK ... line-bot-sdk-nodejs文档: ://line.github.io/line-bot-sdk-nodejs/#getting-started 要求 Node.js 10或更高版本 安装 使用 : $ npm install @line/bot-sdk --save
2009-09-03: - Added fix for: 64 bit Debugger assertion - Added fix for: Undo destroyed editor buffer - Added fix for: Vista 64 IDE startup delay - Added: QC #74646: Buffer overflow in ...
ckeditor5-line-height-plugin CKEditor5的创建插件,用于更改所选块的行高。 开始使用 首先,从npm安装构建: npm install --save ckeditor5-line-height-plugin 或使用纱线: yarn add ckeditor5-line-height-...