CFChart所有X轴标签都不显示

Question

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

我使用JSON样式将样式应用于图表，并且ScaleX的Items-Overlap属性设置为false。

如何在不跳过任何标签的情况下在X轴上显示所有标签？

编辑

 <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>

编辑JS样式

{
"graphset":[
    { 
       "legend":{
        "layout":"x4",
            "border-color":"#CCCCCC",
            "background-color":"#FFFFFF",
           "position":"50% 100%",
             "margin-bottom":5,
             "width":"250",
            "shadow":false,
            "adjust-layout":true,
            "item":{
                "font-family":"Arial",
                "font-size":"12px",
                "font-color":"#777878"
            }

        },
        "background-color":"#ffffff",
        "type":"mixed",
        "scale-x":{
        "items-overlap":false,
         "item":{ 
         "font-angle":90,
         "guide":{
        "visible":false
    }

    }
        },
        "scale-y":{
             "format":"$%v",
             "negation":"currency",
            "guide":{
        "visible":false
    }

        },
         "title":{
            "font-color":"#000000",
            "background-color":"#ffffff",
            "background-color-2":"#000000"
            },
     "plot":{
            "line-width" : "1px"
        },
        "series":[
           {
               "tooltip":{
      "background-color":"navy",
      "padding":"5 10",
      "border-color":"#009",
      "border-width":2,
      "border-radius":5,
      "alpha":0.75,
      "text":"The Gross Rent in this Qtr is %v ."
    }  

            },
            {
             "tooltip":{
      "background-color":"red",
      "padding":"5 10",
      "border-color":"#009",
      "border-width":2,
      "border-radius":5,
      "alpha":0.75,
      "text":"The Net Rent in this Qtr is %v ."
    }
            },
             {
             "tooltip":{
      "background-color":"green",
      "padding":"5 10",
      "border-color":"#009",
      "border-width":2,
      "border-radius":5,
      "alpha":0.75,
      "text":"The Economic Rent in this Qtr is %v ."
    }
            }

        ]
    }
]
}

Answer 1

您可以通过两种方式来实现。一个是通过js样式表，但您需要知道xAxis项目的数量。对于32的示例，您将"最大项目"："32"添加到scalex样式中。

"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>