我想在我的弹性图表中绘制一个自定义背景,垂直轴是线性的,水平轴是类别。在后台,我想根据用户提供的数据对区域进行着色。我在图表背景元素中尝试了 CartesianDataCanvas 和网格线,但没有得到好的解决方案。有人有想法吗?我更喜欢使用没有 mxml 的脚本。提前致谢..
我正在添加我的代码以显示我在使用 CartesianDataCanvas 时遇到的问题。它在面积图中工作得很好,但我想在气泡图中绘制。由于气泡系列不是从水平类别轴的起点开始,CartesianDataCanvas 从第一个气泡的中点开始绘制。但我试图在图表的整个宽度中绘制矩形。
<?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" >
<fx:Script><![CDATA[
import mx.charts.ChartItem;
import mx.charts.LinearAxis;
import mx.charts.chartClasses.CartesianCanvasValue;
import mx.charts.chartClasses.CartesianTransform;
import mx.charts.series.items.ColumnSeriesItem;
import mx.collections.ArrayCollection;
import mx.containers.Box;
import mx.containers.HBox;
import mx.controls.Alert;
import mx.core.INavigatorContent;
import mx.events.FlexEvent;
[Bindable]
public var profits:ArrayCollection = new ArrayCollection([
{Month:'jan', Profit:130},
{Month:'feb', Profit:75},
{Month:'mar', Profit:110},
{Month:'apr', Profit:300}
]);
[Bindable]
public var ratios:Array=['25','25','25','50'];
[Bindable]
public var colors:Array=['0xff0000','0x00ff00','0x0000ff','0xc0c0c0']
private function draw():void {
canvas.clear();
canvas2.clear();
if(colors.length==ratios.length){
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var sumRatio:Number=getSum(ratios);
var nextMax:Number=0;
for(var j:int=0, colnum:int=colors.length-1;j<colors.length;j++,colnum--){
canvas.beginFill(uint(colors[colnum]));
canvas2.beginFill(uint(colors[colnum]));
var minPt:Array;
var minimumPoint:Point;
if(j==0){
minimumPoint=new Point(0,0);
}else{
minimumPoint=new Point(0, canvasHeight*nextMax);
}
minPt= canvas.localToData(minimumPoint);
var division:Number=Number(ratios[colnum])/sumRatio;
var maxPt:Array = canvas.localToData(new Point(canvasWidth,minimumPoint.y+canvasHeight*division));
nextMax+=division;
canvas.drawRect(minPt[0], maxPt[1], maxPt[0], minPt[1]);
canvas.endFill();
canvas2.drawRect(minPt[0], maxPt[1], maxPt[0], minPt[1]);
canvas2.endFill();
}
}
}
private function getSum(array:Array):Number{
var sum:Number=0;
for(var i:int=0;i<array.length;i++){
if(!isNaN(Number(array[i]))){
sum+=Number(array[i]);
}
}
return sum;
}
]]></fx:Script>
<s:HGroup>
<mx:AreaChart id="myChart" showDataTips="true"
dataProvider="{profits}"
selectionMode="single" creationComplete="draw()"
>
<mx:annotationElements>
<mx:CartesianDataCanvas id="canvas" alpha="0.2" includeInRanges="true"/>
</mx:annotationElements>
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{profits}"
categoryField="Month"
/>
</mx:horizontalAxis>
<mx:series>
<mx:AreaSeries
id="series1"
xField="Month"
yField="Profit"
displayName="Profit"
selectable="true"
>
</mx:AreaSeries>
</mx:series>
</mx:AreaChart>
<mx:Legend dataProvider="{myChart}"/>
<mx:BubbleChart id="mybubChart" showDataTips="true"
dataProvider="{profits}"
selectionMode="single" creationComplete="draw()"
>
<mx:annotationElements>
<mx:CartesianDataCanvas id="canvas2" alpha="0.2" includeInRanges="true"/>
</mx:annotationElements>
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{profits}"
categoryField="Month"
/>
</mx:horizontalAxis>
<mx:series>
<mx:BubbleSeries
id="series2"
xField="Month"
yField="Profit"
radiusField="Profit"
displayName="Profit"
selectable="true"
>
<mx:fill>
<mx:SolidColor color="0x663399"/>
</mx:fill>
</mx:BubbleSeries>
</mx:series>
</mx:BubbleChart>
<mx:Legend dataProvider="{mybubChart}"/>
</s:HGroup>
</s:Application>