ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
メインメニュー
フォーラム一覧   -   トピック一覧
   超ビギナー
     積上グラフの凡例チェックボックスON/OFF時のスケールについて
投稿するにはまず登録を

フラット表示 前のトピック | 次のトピック
投稿者 トピック
mayjun
投稿日時: 2015-6-30 10:21
やや 常連さん
登録日: 2010-3-15
居住地:
投稿: 25
積上グラフの凡例チェックボックスON/OFF時のスケールについて
いつもお世話になっております。

積上グラフの凡例にチェックボックスを付け、
チェックボックスをON/OFFすると、積上げた要素が
表示/非表示されるというものを作成しております。

積上げした要素が表示/非表示されるところまでは
完成したのですが、
左側の目盛りと棒グラフが合っていないようです。

左側の目盛りはそのままで、積上げた棒が
大きくなったり小さくなったりしたいのですが、
挙動がおかしいです。

以下、ソースです。
よろしくお願いいたします。




<?xml version="1.0" encoding="utf-8"?>
<mx:Application  xmlns:mx="http://www.adobe.com/2006/mxml"
				 xmlns:renderer="renderer.*"
				 layout="absolute"		 
				 backgroundColor="0xffffff" backgroundGradientColors="[0xFFFFFF, 0xFFFFFF]"
				 verticalScrollPolicy="off" horizontalScrollPolicy="off" width="100%" height="100%">

	<mx:Script>

		<![CDATA[
			import mx.collections.ArrayCollection;
			
			[Bindable]
			private var aryData:ArrayCollection = new ArrayCollection([
				  {Date:"2015/6/1", y1:"10",y2:"12",y3:"27",y4:"32"}
				, {Date:"2015/6/2", y1:"15",y2:"11",y3:"21",y4:"13"}
				, {Date:"2015/6/3", y1:"9",y2:"16",y3:"5",y4:"25"}
				, {Date:"2015/6/4", y1:"25",y2:"15",y3:"41",y4:"18"}
			]);
		]]>
		
	</mx:Script>
	<mx:HBox height="100%" width="100%">
		<mx:CartesianChart id="chart" width="100%" height="100%" 
						   dataProvider="{aryData}" 
						   showDataTips="true">

			<mx:verticalAxisRenderers>
				<mx:AxisRenderer  id="verAxisRenderer1"
								  placement="left">
					<mx:axis>
						<mx:LinearAxis id="verAxis1"/>
					</mx:axis>
				</mx:AxisRenderer>
			</mx:verticalAxisRenderers>
			
			<mx:horizontalAxis>
				<mx:CategoryAxis categoryField="Date" />
			</mx:horizontalAxis>
			
			<mx:series>
				<mx:ColumnSet type="stacked" width="60" verticalAxis="{verAxis1}">
					<mx:ColumnSeries displayName="テスト1" yField="y1" id="y1"/>
					<mx:ColumnSeries displayName="テスト2" yField="y2" id="y2" />
					<mx:ColumnSeries displayName="テスト3" yField="y3" id="y3" />
					<mx:ColumnSeries displayName="テスト4" yField="y4" id="y4" />
				</mx:ColumnSet>
			</mx:series>
			
		</mx:CartesianChart>
		
		<mx:HBox>
			<renderer:CheckBoxLegend id="myLegend" toggleChartSeries="true" dataProvider="{chart}" direction="vertical"/>
		</mx:HBox>
	</mx:HBox>
</mx:Application>


CheckBoxLegend.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Legend xmlns:mx="http://www.adobe.com/2006/mxml"
		   legendItemClass="renderer.CheckBoxLegendItem"
		   childAdd="legendItemAdded(event)" childRemove="legendItemRemoved(event)">
	
	<mx:Metadata>
		[Event(name="change", type="renderer.CheckBoxLegendItemChangedEvent")]
	</mx:Metadata>
	
	<mx:Script>
		<![CDATA[
			import renderer.CheckBoxLegendItemChangedEvent;
			import renderer.CheckBoxLegendItem;
			
			import mx.charts.chartClasses.ChartBase;
			import mx.charts.chartClasses.IChartElement;
			import mx.charts.chartClasses.Series;
			import mx.charts.series.ColumnSeries;
			import mx.events.ChildExistenceChangedEvent;
			
			
			[Inspectable(category="Common", defaultValue="true")]
			public var toggleChartSeries:Boolean = true;
			
			override protected function commitProperties():void{
				super.commitProperties();
				
				
				var chart:ChartBase = (dataProvider as ChartBase);
				if (chart && chart.series) {
					var series:Array = chart.series;
					for each (var s:Series in series){
						if (s) {
							setSeriesShown(s, s.visible);
						}
					}
				}
			}
			
			private function legendItemAdded(event:ChildExistenceChangedEvent):void{
				if (event.relatedObject is CheckBoxLegendItem){
					var item:CheckBoxLegendItem = (event.relatedObject as CheckBoxLegendItem);
					item.addEventListener(Event.CHANGE, legendItemChanged);
				}
			}
			
		
			private function legendItemRemoved(event:ChildExistenceChangedEvent):void{
				if (event.relatedObject is CheckBoxLegendItem) {
					var item:CheckBoxLegendItem = (event.relatedObject as CheckBoxLegendItem);
					item.removeEventListener(Event.CHANGE, legendItemChanged);
				}
			}
			
			private function legendItemChanged(event:Event):void {
				var legendItem:CheckBoxLegendItem = (event.currentTarget as CheckBoxLegendItem);
				
				var element:IChartElement = legendItem.element;
				if (toggleChartSeries && (element is Series)) {
					var series:Series = (element as Series);
					series.visible = legendItem.selected;
					
					if (series is mx.charts.series.ColumnSeries) {
						var CSeries:mx.charts.series.ColumnSeries = series as mx.charts.series.ColumnSeries;
						if (series.visible == false){
							CSeries.yField = null;
						} else {
							CSeries.yField = CSeries.id.toString();
						}
					}
				}
				
				dispatchEvent(new CheckBoxLegendItemChangedEvent(
					CheckBoxLegendItemChangedEvent.CHANGE, legendItem));
			}
			
			public function setSeriesShown(series:Series, show:Boolean):void{
				if (series) {
					var changed:Boolean = false;
					
					var legendItem:CheckBoxLegendItem = getLegendItem(series);
					if (legendItem && (legendItem.selected != show)){
						legendItem.selected = show;
						changed = true;
					}
					
					if (changed) {
						series.visible = show;
						
						dispatchEvent(new CheckBoxLegendItemChangedEvent(
							CheckBoxLegendItemChangedEvent.CHANGE, legendItem));
					}
				}
			}
			
			private function getLegendItem(series:Series):CheckBoxLegendItem{
				var found:CheckBoxLegendItem = null;
				for (var i:int = 0; i < numChildren; i++) {
					var item:CheckBoxLegendItem = (getChildAt(i) as CheckBoxLegendItem);
					if (item && (item.element == series)) {
						found = item;
						break;
					}
				}
				return found;
			}
		]]>
	</mx:Script>
	
</mx:Legend>


CheckBoxLegendItem.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:LegendItem xmlns:mx="http://www.adobe.com/2006/mxml"
			   click="legendItemClicked(event)" paddingLeft="20">
	
	<mx:Metadata>
		[Event(name="change", type="renderer")]
	</mx:Metadata>
	
	<mx:Script>
		<![CDATA[
			import mx.controls.CheckBox;
			
			private var _checkbox:CheckBox;
			
			public function get checkbox():CheckBox{
				if (_checkbox == null) {
					_checkbox = new CheckBox();
					_checkbox.selected = true;
					_checkbox.addEventListener(MouseEvent.CLICK, checkboxClicked);
					_checkbox.addEventListener(Event.CHANGE, checkboxChanged);
				}
				return _checkbox;
			}
			
			public function get selected():Boolean {
				return checkbox.selected;
			}
			
			public function set selected(value:Boolean):void{
				checkbox.selected = value;
			}
			
			public function setSelected(value:Boolean, fireEvent:Boolean = true):void{
				checkbox.selected = value;
				if (fireEvent) {
					dispatchEvent(new Event(Event.CHANGE));
				}
			}
			
			override protected function createChildren():void{
				super.createChildren();
				addChild(checkbox);
			}
			
			override protected function updateDisplayList(w:Number, h:Number):void{
				super.updateDisplayList(w, h);
				
				var cby:Number = Math.max(0, (h - checkbox.height) / 2);
				if (cby != checkbox.y) {
					checkbox.y = cby;
				}
				
				var g:Graphics = graphics;
				g.clear();
				g.beginFill(0xffffff, 0);
				g.drawRect(0, 0, w, h);
				g.endFill();
			}
			
			private function legendItemClicked(event:MouseEvent):void{
				checkbox.selected = !checkbox.selected;
				checkbox.dispatchEvent(new Event (Event.CHANGE));
			}
			
			private function checkboxClicked(event:MouseEvent):void{
				event.stopPropagation();
			}
			
			private function checkboxChanged(event:Event):void{
				dispatchEvent(event.clone());
			}
		]]>
	</mx:Script>
</mx:LegendItem>


CheckBoxLegendItemChangedEvent.as

package renderer
{
	import renderer.CheckBoxLegendItem;
	
	import flash.events.Event;
	public class CheckBoxLegendItemChangedEvent extends Event
	{
		public static const CHANGE:String = Event.CHANGE;
		
		private var _legendItem:CheckBoxLegendItem;
		
		public function CheckBoxLegendItemChangedEvent(type:String, legendItem:CheckBoxLegendItem) {
			super(type);
			this._legendItem = legendItem;
		}
		
		public function get legendItem():CheckBoxLegendItem{
			return _legendItem;
		}
		
		public function get legendItemSelected():Boolean {
			return (_legendItem ? _legendItem.selected : false);
		}
	}
}
フラット表示 前のトピック | 次のトピック

題名 投稿者 日時
 » 積上グラフの凡例チェックボックスON/OFF時のスケールについて mayjun 2015-6-30 10:21

投稿するにはまず登録を