Flex4 - 用CircleItemRenderer给线图上加数据点,并设置点颜色和大小
作者:hangge | 2014-11-21 17:20
Flex的线图组件LineChart里,如果把LineSeries的itemRenderer设置成CircleItemRenderer,即可在线上面显示数据点,代码如下:


<mx:series>
<mx:LineSeries yField="value" form="segment" displayName="数量"
itemRenderer="mx.charts.renderers.CircleItemRenderer"
lineStroke="{lineS1}"/>
</mx:series>
效果图如下:

但是这个点的样式也太丑了,外面一圈还是黄色的,想改个点的颜色还没辙。后来在网上查了好久,才发现解决办法。
解决办法:对于LineSeries,我们可以除了通过lineStroke来设置线条样式,还可以通过stroke来设置数据点的外圈颜色和粗细(即上图那个黄色的部分)。
而且页面初始化的时候,可以通过setStyle的方式给LineSeries设置radius(点的半径),fill(内部填充色)。
代码如下:
<?xml version="1.0"?>
<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"
creationComplete="init(event)">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
[Bindable]
private var myData:ArrayCollection = new ArrayCollection( [
{ month: "一月", value: 20},
{ month: "二月", value: 60},
{ month: "三月", value: 215},
{ month: "四月", value: 202},
{ month: "五月", value: 190},
{ month: "六月", value: 95}]);
protected function init(event:FlexEvent):void
{
line1.setStyle("fill", 0xffffff); //原点内部填充色为白色
line1.setStyle("radius", 4); //整个圆点的半径为4
}
]]>
</fx:Script>
<fx:Declarations>
<!-- 轴线样式 -->
<mx:SolidColorStroke id = "axisS1" color="0xBBCCDD" weight="1"/>
<!-- 线条样式 -->
<mx:SolidColorStroke id = "lineS1" color="0x00fff5" weight="2"/>
<!-- 线条点样式 (外圈颜色同线条颜色,外圈线条粗细为1) -->
<mx:SolidColorStroke id = "pointS1" color="0x00fff5" weight="1"/>
</fx:Declarations>
<mx:LineChart id="linechart" height="60%" width="60%"
verticalCenter="0" horizontalCenter="0"
showDataTips="true" dataProvider="{myData}">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="month"/>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis id="vAxis"/>
</mx:verticalAxis>
<mx:verticalAxisRenderers>
<mx:AxisRenderer axis="{vAxis}" tickPlacement="none" minorTickPlacement="none"
axisStroke="{axisS1}"/>
</mx:verticalAxisRenderers>
<mx:series>
<mx:LineSeries id="line1" yField="value" form="segment" displayName="数量"
itemRenderer="mx.charts.renderers.CircleItemRenderer"
stroke="{pointS1}"
lineStroke="{lineS1}"/>
</mx:series>
</mx:LineChart>
</s:Application>
效果图如下:

全部评论(0)