CFChart未显示所有X轴标签

时间:2014-09-11 11:51:53

标签: json coldfusion axis-labels cfchart

我的应用程序中有很多cfcharts。在我的一个cfcharts中有32个X轴标签,但只有18个正在显示。除此之外,图表显示正确,但缺少x轴标签。

我使用JSON样式将样式应用于图表,而Items-Overlap的{​​{1}}属性设置为ScaleX

如何在X轴上显示所有标签而不跳过任何标签?

修改

false

编辑JS样式

 <cfchart  
        format="jpg"
        chartheight="320"  
        chartwidth="690"  showborder="yes" 
        title="Trend In Subject Rents"  style="20currency.js"  name="Qtr1">
        <cfchartseries type="line" 
            serieslabel="Gross"
            seriescolor="navy"  markerStyle="diamond" paintStyle="plain" >
            <cfloop query="qry_subproperty">
                <cfset variables.Yearquarter=ObjPropDetails.JoinYearQuarter(qry_subproperty.Yearquarter)>
                <cfchartdata item="#variables.Yearquarter#" value="#round(qry_subproperty.Gross)#" >
            </cfloop>
        </cfchartseries>
        <cfchartseries type="line" 
            serieslabel="Net"
            seriescolor="red"  markerstyle="rectangle">
            <cfloop query="qry_subproperty">
                <cfset variables.Yearquarter=ObjPropDetails.JoinYearQuarter(qry_subproperty.Yearquarter)>
                <cfchartdata item="#variables.Yearquarter#" value="#round(qry_subproperty.Net)#" >
            </cfloop>
        </cfchartseries>
        <cfchartseries type="line" 
            serieslabel="Economic"
            seriescolor="green" markerstyle="triangle">
            <cfloop query="qry_subproperty">
                <cfset variables.Yearquarter=ObjPropDetails.JoinYearQuarter(qry_subproperty.Yearquarter)>
                <cfchartdata item="#variables.Yearquarter#" value="#round(qry_subproperty.Economic)#" >
            </cfloop>
        </cfchartseries>
     </cfchart>

1 个答案:

答案 0 :(得分:0)

你可以通过两种方式做到这一点。一个是通过js样式表,但您需要知道xAxis项目的数量。对于32的示例,您将“max-items”:“32”添加到scale-x样式。

"scale-x":{
        "max-items":"32",
        "items-overlap":false,
        "item":{ 
            "font-angle":90,
            "guide":{
                    "visible":false
                }
             }
}

但听起来你需要让它变得更有活力。因此,您需要在创建图表之前确定xAxis的数量。通过cfchart的xAxis属性设置此值,如下例所示。

<!--- set max-items to recordcount of qry_subproperty --->
<cfset xAxis = {"max-items":"#qry_subproperty.recordcount#"}>
<cfchart  
    format="jpg"
    chartheight="320"  
    chartwidth="690"  showborder="yes" 
    title="Trend In Subject Rents"  style="20currency.js"  name="Qtr1"  xAxis='#xAxis#'>
    <cfchartseries type="line" 
        serieslabel="Gross"
        seriescolor="navy"  markerStyle="diamond" paintStyle="plain" >
        <cfloop query="qry_subproperty">
            <cfset variables.Yearquarter=ObjPropDetails.JoinYearQuarter(qry_subproperty.Yearquarter)>
            <cfchartdata item="#variables.Yearquarter#" value="#round(qry_subproperty.Gross)#" >
        </cfloop>
    </cfchartseries>
    <cfchartseries type="line" 
        serieslabel="Net"
        seriescolor="red"  markerstyle="rectangle">
        <cfloop query="qry_subproperty">
            <cfset variables.Yearquarter=ObjPropDetails.JoinYearQuarter(qry_subproperty.Yearquarter)>
            <cfchartdata item="#variables.Yearquarter#" value="#round(qry_subproperty.Net)#" >
        </cfloop>
    </cfchartseries>
    <cfchartseries type="line" 
        serieslabel="Economic"
        seriescolor="green" markerstyle="triangle">
        <cfloop query="qry_subproperty">
            <cfset variables.Yearquarter=ObjPropDetails.JoinYearQuarter(qry_subproperty.Yearquarter)>
            <cfchartdata item="#variables.Yearquarter#" value="#round(qry_subproperty.Economic)#" >
        </cfloop>
    </cfchartseries>
 </cfchart>