Question

Flex LineChart 怎样实现如下图效果

Answer 1

我正在做的跟你的有点像，不知道你能不能用上
<?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:chartClasses="views.charts.chartClasses.*"
applicationComplete="onInit()"
creationComplete="creationBtnHandler(event)">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<fx:XMLList id="dp1">
<quote day="1" date="2011-1-01" 全国="550" 回压="900"/>
<quote day="2" date="2011-1-08" 全国="570" 回压="539.52"/>
<quote day="3" date="2011-1-15" 全国="530" 回压="538.75" />
<quote day="4" date="2011-1-22" 全国="540" 回压="539.38"/>
<quote day="5" date="2011-1-29" 全国="600" 回压="539.42" />
<quote day="6" date="2011-2-05" 全国="610" 回压="540.23" />
<quote day="7" date="2011-2-12" 全国="605" 回压="540.75" />
<quote day="8" date="2011-2-19" 全国="620" 回压="551.06" />
<quote day="9" date="2011-2-26" 全国="550" 回压="640.83" />
<quote day="10" date="2011-3-05" 全国="530" 回压="540.41" />
<quote day="11" date="2011-3-12" 全国="605.22" 回压="540.18" />
<quote day="12" date="2011-3-19" 全国="605.83" 回压="639.96" />
<quote day="13" date="2011-3-26" 全国="605.18" 回压="640.32" />
<quote day="14" date="2011-4-02" 全国="530" 回压="540.74" />
<quote day="15" date="2011-4-09" 全国="605.41" 回压="540.13" />
<quote day="16" date="2011-4-30" 全国="605.4" 回压="540.77" />
<quote day="17" date="2011-5-07" 全国="620" 回压="640.6" />
<quote day="18" date="2011-5-12" 全国="550" 回压="640.41" />
<quote day="19" date="2011-5-21" 全国="530" 回压="640.81" />
<quote day="20" date="2011-5-28" 全国="620" 回压="539.58" />
<quote day="21" date="2011-6-04" 全国="570" 回压="639.52" />
<quote day="22" date="2011-6-11" 全国="625" 回压="538.75" />
<quote day="23" date="2011-6-18" 全国="550" 回压="639.38" />
<quote day="24" date="2011-6-25" 全国="570" 回压="639.42" />
<quote day="25" date="2011-7-02" 全国="620" 回压="540.23" />
<quote day="26" date="2011-7-09" 全国="570" 回压="540.75" />
<quote day="27" date="2011-7-16" 全国="570" 回压="651.06" />
<quote day="28" date="2011-7-23" 全国="570" 回压="640.83" />
<quote day="29" date="2011-7-30" 全国="530" 回压="640.41" />
<quote day="30" date="2011-8-06" 全国="620" 回压="540.18" />
<quote day="31" date="2011-8-13" 全国="570.83" 回压="639.96" />
<quote day="32" date="2011-8-20" 全国="620" 回压="540.32" />
<quote day="33" date="2011-8-27" 全国="530" 回压="540.74" />
<quote day="34" date="2011-9-03" 全国="570" 回压="640.13" />
<quote day="35" date="2011-9-10" 全国="575" 回压="640.77"/>
<quote day="36" date="2011-9-17" 全国="520" 回压="640.6" />
<quote day="37" date="2011-9-24" 全国="570" 回压="540.41" />
<quote day="38" date="2011-10-01" 全国="530" 回压="540.81" />
<quote day="39" date="2011-10-08" 全国="536" 回压="640.81" />
<quote day="40" date="2011-10-15" 全国="530" 回压="639.58" />
<quote day="41" date="2011-10-22" 全国="532" 回压="539.52" />
<quote day="42" date="2011-10-29" 全国="575" 回压="538.75" />
<quote day="23" date="2011-11-05" 全国="530" 回压="539.38" />
<quote day="44" date="2011-11-12" 全国="570" 回压="639.42" />
<quote day="45" date="2011-11-19" 全国="571" 回压="640.23" />
<quote day="46" date="2011-11-26" 全国="570" 回压="540.75" />
<quote day="47" date="2011-12-03" 全国="579" 回压="651.06" />
<quote day="48" date="2011-12-10" 全国="570" 回压="540.83" />
<quote day="49" date="2011-12-17" 全国="530" 回压="640.41" />
<quote day="49" date="2011-12-24" 全国="570" 回压="540.41" />
<quote day="49" date="2011-12-31" 全国="640.41" 回压="570" />

</fx:XMLList>
<mx:XMLListCollection id="dp" source="{dp1}">

</mx:XMLListCollection>

<mx:CurrencyFormatter id="currFormatter" precision="2" />
<mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>
<mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>

<s:SolidColorStroke id = "s1" color="#f706dd" weight="2" />
<mx:SolidColorStroke id = "s2" color="#1734e5" weight="2"/>

<mx:SolidColorStroke id="vSolid" weight="1" color="#333333" alpha="0.1" />
<mx:SolidColorStroke id="hSolid" weight="1" color="#ff0000" alpha="0.1" />
<fx:Array id="seriesFilterArr" />

</fx:Declarations>
<fx:Script>
<![CDATA[
/* 翻译之前跳过加水印步骤 */
[Frame(extraClass="mx.charts.chartClasses.ChartsLicenseHandler")]
import mx.formatters.DateFormatter;
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
import mx.controls.Alert;
import mx.charts.CategoryAxis;
import mx.charts.chartClasses.IAxis;

[Bindable]
private var array:ArrayCollection = new ArrayCollection();

//private var _DropShadowFilter:DropShadowFilter = new DropShadowFilter(2, 45, 0x000000, 0.7, 2, 2, 0.65, 3, false, false);
[Bindable]
private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String {
return currFormatter.format(item);
}

private function categoryAxis_labelFunc(item:Object, prevValue:Object, axis:CategoryAxis, categoryItem:Object):String {
return String(item);
}

protected function hsb_changeHandler(event:Event):void
{
setDataProvider();
}

protected function setDataProvider():void
{

var j:int = int(hsb.scrollPosition);

array.removeAll();

var count:int =0;

for (var i:int = j; (i <j+100); i++)
{
array.addItem(dp.getItemAt(i));
}
mychart.dataProvider = array;
}

private function onInit():void

{
Alert.show("数据总数:"+dp1.length.toString());
// logBox.text = "";
// var currentParamIndex:uint = 1;
// for(var parameterName:String in parameters)
// {
// logBox.text += "Parameter #"+currentParamIndex + ": ";
// logBox.text += parameterName + " " + parameters[parameterName] + "\n";
// currentParamIndex++;
// }

}
private function init(evt:Event):void {
var chart:LineChart = evt.currentTarget as LineChart;
seriesFilterArr = chart.seriesFilters;
}

private function checkBox_click(evt:MouseEvent):void {
var len:uint = mychart.seriesFilters.length;
if (len > 0) {
mychart.seriesFilters = [];
} else {
mychart.seriesFilters = seriesFilterArr;
}
}
private var downXY:Point=new Point();
private var upXY:Point=new Point();
private function mouseEventFunc(evt:MouseEvent):void {
switch (evt.type) {
case "mouseDown" :downXY.x = mouseX;downXY.y = mouseY;evt.currentTarget.startDrag();
break;
case "mouseUp" :upXY.x = mouseX;upXY.y = mouseY;evt.currentTarget.stopDrag();
break;
default:
break;}}
private function creationBtnHandler(e:Event):void{
mychart.addEventListener(MouseEvent.MOUSE_UP,mouseEventFunc);
mychart.addEventListener(MouseEvent.MOUSE_DOWN,mouseEventFunc);
}
]]>
</fx:Script>
<s:Panel id="panel1" x="0" y="0" width="100%" height="620" title="我的回压折线图">
<mx:Legend dataProvider="{mychart}" width="89" height="23" x="0" y="24"/>

<mx:ApplicationControlBar dock="true">
<mx:CheckBox id="checkBox"
label="过滤"
labelPlacement="left"
click="checkBox_click(event);" />
</mx:ApplicationControlBar>

<mx:LineChart id="mychart" y="51" width="1145" height="494" dataProvider="{array}"
paddingLeft="5" paddingRight="5" seriesFilters="[]" showDataTips="true" creationComplete="init(event);"> <!--seriesFilters="[]" -->

<mx:verticalAxis>
<mx:LinearAxis baseAtZero="true" minimum="0" maximum="901"/>
</mx:verticalAxis>
<mx:horizontalAxis>
<mx:CategoryAxis id="ca" categoryField="@date" labelFunction="categoryAxis_labelFunc" />
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer axis="{ca}" canDropLabels="true" />
</mx:horizontalAxisRenderers>
<mx:series>
<!--<mx:LineSeries yField="@全国" displayName="全国" lineStroke="{s1}" lineSegmentRenderer="com.ai.test.renderer.MarcoLineRenderer"/>
<mx:LineSeries yField="@回压" displayName="回压" lineStroke="{s2}" lineSegmentRenderer="com.ai.test.renderer.MarcoLineRenderer"/>-->
<!--<mx:LineSeries yField="@全国" displayName="全国" lineStroke="{s1}" />-->
<mx:LineSeries yField="@回压" displayName="回压" lineStroke="{s2}"/>
</mx:series>
</mx:LineChart>
<mx:HScrollBar id="hsb" x="0" y="0" width="100%" height="16" lineScrollSize="45"
maxScrollPosition="34" minScrollPosition="0" pageScrollSize="5" repeatDelay="5"
repeatInterval="5" scroll="hsb_changeHandler(event);" scrollPosition="10"/>
</s:Panel>
</s:Application>

Answer 2

找找AXIIS 或者AMchart里面也许有 FLEX自己实现比较难。