如何在Flex图表中自定义突出显示的数据点圆？ [英] How to customize highlighted data point circles in Flex charts?

问题描述

我需要使用LineSeries自定义标准Flex LineChart的外观和感觉。我不知道如何更改鼠标指针在数据点上绘制的默认圆形。

I need to customize a look and feel of standard Flex LineChart with LineSeries. I cannot figure out how to change default circles drawn when the mouse pointer is over a data point.

推荐答案

解决方案

Solution

有必要创建一个自定义 itemRenderer c $ c> MOUSE_OVER 事件处理程序。图表的 showDataTipTargets 属性必须设置为 false

It is necessary to create a custom itemRenderer and draw whatever you want in the MOUSE_OVER event handler. Chart's showDataTipTargets property has to be set to false

在寻找解决方案时，我忘记了 itemRenderer 是Flex组件，可以处理鼠标事件。我的同事指出并帮助解决了这个问题。

While looking for a solution, I forgot that itemRenderer is the Flex component and can handle mouse events. My colleagues pointed to it and helped resolve the issue.

代码

CustomDataTipTargetRenderer .mxml

CustomDataTipTargetRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                creationComplete="init()"
                ...>
    <fx:Script>
        <![CDATA[
            private function init():void
            {
                addEventListener(MouseEvent.MOUSE_OVER, onMouseOver); 
                addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
            }

            private function onMouseOver(event:MouseEvent):void
            { 
                // Show custom data tip target point. 
            } 

            private function onMouseOut(event:MouseEvent):void
            { 
                // Hide custom data tip target point.
            }
        ]]>
    </fx:Script>
</s:ItemRenderer>

YourView.mxml

YourView.mxml

<mx:LineChart ...
              showDataTips="true"
              showDataTipTargets="false">
    ...
    <mx:series>
        <mx:LineSeries ... itemRenderer="yournamespace.CustomDataTipTargetRenderer">
            ...
        </mx:LineSeries>
    </mx:series>
</mx:LineChart>

这篇关于如何在Flex图表中自定义突出显示的数据点圆？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！