在Flex组件中设置不同的Chart DataTip样式

时间:2011-11-01 12:19:24

标签: css flex flex4 datatip

我遇到以下问题:我的任务是为Flex 4.5中的两个图表设置数据提示的样式。两个图表都位于两个不同的基于<Group>的组件中,这些组件已添加到<Application>

所以经过彻底的研究后,我试图做的事情。首先应用css降序选择器:

#container#chart1 chartClasses|DataTip{     
    backgroundColor:white;
    backgroundAlpha:0.01;
    fontSize: 12; 
    fontWeight:bold;
    fontStyle:italic; 
}

所以ID =容器的组件在里面是id =“chart1”的图表 尽管Adobe文档说应该这样做,但它不起作用。 我认为应该解决的另一种方法是使用这种CSS样式

chartClasses|DataTip{
    backgroundColor:white;
    backgroundAlpha:0.01;
    fontSize: 12; 
    fontWeight:bold;
    fontStyle:italic; 
}

这些组件中的每个组件,但猜猜是什么,图表DataTip类选择器仅在<Application>级别上工作(然后它将相同的样式应用于在应用程序中找到的所有图表数据提示。所以将它放入两者中的每一个中包含图表的组件无效。

接下来,我创建了一个用于图表的dataTipRenderer样式的类。然后在名为MyCustomDataTipRenderer的类中设置类选择器:

.dataTip{
    backgroundColor:white;
    backgroundAlpha:0.01;
    fontSize: 12; 
    fontWeight:bold;
    fontStyle:italic; 
}

是的,它确实有效。但是我想说我希望能够根据主机图为自定义数据提示渲染器设置不同的样式。我该怎么办?似乎Flex SDK没有以任何方式公开thr datatipRenderer.So如果我有效地设置了这样的自定义datatip渲染器:

columnchart1.setStyle("dataTipRenderer",CustomDataTip); 

然后我希望能够访问CustomDataTip类的实例。但我不能。所以我目前唯一能做的就是为每个图表创建一个独特的自定义数据提示渲染器类。那可能如果您只想要几个图表,那就好了,但如果我们有很多图表,我们该怎么办?

1 个答案:

答案 0 :(得分:1)

尝试将以下内容添加到css文件的开头(假设文件名是chartStyles.css)

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "http://www.adobe.com/2006/mxml";

mx|#container#chart1 chartClasses|DataTip{     
    backgroundColor:white;
    backgroundAlpha:0.01;
    fontSize: 12; 
    fontWeight:bold;
    fontStyle:italic; 
}

s|#container#chart1 chartClasses|DataTip{     
    backgroundColor:white;
    backgroundAlpha:0.01;
    fontSize: 12; 
    fontWeight:bold;
    fontStyle:italic; 
}

如果将css样式放在主应用程序mxml中的样式标记中,那么开头就不需要@namespace标记了。你可以直接添加mx |和s |作为你的风格的前缀。