Coldfusion CFChart水平柱状图x轴标签对齐及样式配置问题

问题解答 #

1. 轴标签对齐设置 #

换行后标签对齐异常可以通过在xAxis配置结构体中添加labelAlign属性解决，需要右对齐设为"right"，左对齐设为"left"即可，你的水平柱状图场景建议设置为右对齐，保证标签和条形的间距统一：

<CFSET xAxis_disp  = {"itemsOverlap":true, "max-items": SQL_Query.RecordCount, "labelAlign": "right"}>

如果多行标签需要调整垂直对齐规则，可以额外添加labelVAlign属性，可选值为"top"/"middle"/"bottom"。

2. CFChart配置属性查询路径 #

完整的CFChart所有元素合法属性说明可以在Adobe官方ColdFusion开发文档中查询，对应路径为：ColdFusion 开发指南 -> 生成图表和报表 -> CFChart 配置属性参考，搜索CFChart axis attributes即可定位到轴相关的全量配置说明。

3. 条形数值颜色修改 #

直接在CFCHARTSERIES标签中添加dataLabelColor属性，指定对应的十六进制颜色值即可，比如设置为白色的写法如下：

<CFCHARTSERIES 
    colorlist="##234086,##284A99,##284A99,##325CC0,##3D68CD,##5077D2,##6486D7,##7795DC,##8BA4E1"
    query="SQL_Query"
    type="bar"  
    datalabelstyle="value"
    dataLabelColor="##FFFFFF"
    itemcolumn="CRFNAME"  
    valuecolumn="ErrCounter">

4. 数值显示在条形内部 #

在CFCHARTSERIES标签中添加dataLabelPosition属性，设置为"inside"即可，水平柱状图下该配置会默认将数值居中显示在条形内部，可选位置值还有"outside"/"top"/"bottom"。

调整后的完整代码示例 #

<CFSET xAxis_disp  = {"itemsOverlap":true, "max-items": SQL_Query.RecordCount, "labelAlign": "right"}>
<CFSET aspect3d_small={"angle":0,"depth":7,"true3d":false}>
<CFSET yAxisStep_25 = {"min-value":"0","step":"5"}>
<CFCHART
    style="default" 
    show3d="yes"
    chartHeight="#chartHeight_error#"
    chartwidth="500"
    type="horizontalbar"
    gridlines="20"
    yAxis = "#yAxisStep_25#"
    xAxis="#xAxis_disp#"
    aspect3d="#aspect3d_small#"
    font="times" > 
    <CFCHARTSERIES 
    colorlist="##234086,##284A99,##284A99,##325CC0,##3D68CD,##5077D2,##6486D7,##7795DC,##8BA4E1"
        query="SQL_Query"
        type="bar"  
        datalabelstyle="value"
        dataLabelColor="##FFFFFF"
        dataLabelPosition="inside"
        itemcolumn="CRFNAME"  
        valuecolumn="ErrCounter">
    </CFCHARTSERIES>
</CFCHART>

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