一、问题描述

FineReport能不能设置单选按钮组控件每个选项的颜色，而且每个颜色都不一样，这样使选项看起来更加美观，而且有层次感。

最终效果如下：

二、解决思路

FineReport内置的单选按钮组控件并没有提供可以设置选项颜色的地方，因此，要改变颜色，就需要使用代码来修改。针对这个问题，可以有以下两种思路：

一是直接通过js初始化后事件，修改对应的对应选项的css属性。

二是直接对选项的显示值拼接HTML代码。

三、实现步骤

1）先创建一个单选按钮组控件

将控件的数据字典设置如下：

类型设置选择公式，实际值设置为：

range(3)+"#"

此时的预览效果如下，颜色单一不美观。

2）查看对应的HTML源码

预览报表页面之后，按下F12键，定位到单选按钮组控件的源码，如下，可见选项的文字与它前面的圆圈都在同一个span标签里面，这样如果通过js直接给这个span标签设置css属性，就达成不了我们想要的效果。需要另外做一些处理才行，这样相比另一种方式比较麻烦，因此我们放弃了通过js来实现的方法。

3）设置控件的显示值

显示值的公式如下，给选项拼接了span标签，并且设置标签的前景颜色为白色，背景颜色为红色：

"<span style='color:#fff;background-color:red'>" + $$ + "</span>"

此时预览的效果如下，：

初步的效果已经达成了，但是样式还是不太美观。第一背景颜色都一样，没能体现选项之间的层次感；第二背景颜色刚好包裹了文字，显得有点小家子气，不够大方得体；第三，背景块是方形的，有棱有角，显得难看。

下面一一来解决这些问题。

第一个问题，背景颜色一致，如何实现不同颜色呢。其实只要判断一下不同的选项拼接出不同的颜色即可。

第二个问题，背景太小。首先想到的是改变span标签的宽和高。但是span的宽度是不能直接改变的，需要先将span标签设置成block块，才能改变宽度。同时还要考虑一个问题，如果我们设置了span标签的宽度，结果选项里的文字长度超过了这个宽度怎么办？综合各种考虑之后，最终决定改变span的内边距padding属性来达到这个效果。

第三个问题，方块太难看，那就把它改成圆角。通过设置border-radius属性来达成这个效果。

最终将显示值的公式修改如下：

"<span style='color:#fff;padding:1px 5px;border-radius:10px;background-color:" + switch($$, "1#", "red", "2#", "#f5c13c", "3#", "green") + "'>" + $$ + "</span>"