CF11 CFChart饼图设置labelformat="percent"不显示百分号问题咨询

问题原因 #

你设置labelformat="percent"不生效的核心原因是：CFChart的percent格式默认要求传入的value是0~1之间的小数，比如要展示71%就需要传入0.71而非整数71。如果直接传入整数百分比数值，框架会自动将数值乘以100后再拼接%，会出现异常显示，所以属性看似失效。

解决方法 #

方法1：调整数值适配原生percent格式（推荐）

把现有百分比数值统一除以100转成小数，保留labelformat="percent"属性即可，无需手动拼接%到item属性中。修改后代码如下：

<CFSET PercentLocked = 0>
<cfset PercentUnlocked = 0>
<cfset PercentOpenQueries = 0>
<cfset PercentOpenErrors = 29>
<cfset PercentClean = 71>

<cfchart    
    type="pie"                                          
    chartWidth="800"  
    show3d="true"
    font="times"
    style="blue"
    labelformat="percent">
    <cfchartseries >    
        <cfchartdata item="Locked Forms" value="#PercentLocked/100#" > 
        <cfchartdata item="unLocked Forms" value="#PercentUnlocked/100#">  
        <cfchartdata item="Forms w/Open Queries" value="#PercentOpenQueries/100#" > 
        <cfchartdata item="forms w/Errors" value="#PercentOpenErrors/100#">
        <cfchartdata item="Clean forms" value = "#PercentClean/100#">
    </cfchartseries>
</cfchart>

修改完成后，饼图的数值标签会自动显示为带%的格式，item属性仅需要填写分类名称即可。

方法2：保留整数数值，自定义标签格式

如果不想修改传入的value值，ColdFusion 10及以上版本可以通过dataLabelFormat属性自定义拼接百分号，不需要调整数值也不需要在item里手动拼%：

<cfchart    
    type="pie"                                          
    chartWidth="800"  
    show3d="true"
    font="times"
    style="blue"
    dataLabelFormat="%value%%">
    <cfchartseries >    
        <cfchartdata item="Locked Forms" value="#PercentLocked#" > 
        <cfchartdata item="unLocked Forms" value="#PercentUnlocked#">  
        <cfchartdata item="Forms w/Open Queries" value="#PercentOpenQueries#" > 
        <cfchartdata item="forms w/Errors" value="#PercentOpenErrors#">
        <cfchartdata item="Clean forms" value = "#PercentClean#">
    </cfchartseries>
</cfchart>

其中%value%%是CFChart的内置变量语法，代表取当前切片的数值，后面额外拼接一个%符号。

内容的提问来源于stack exchange，提问作者mctobey