0

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

我使用 JSON 样式将样式应用于图表，并且Items-Overlap属性ScaleX设置为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 ."
    }
            }



        ]
    }
]
}
4

1 回答 1

0

您可以通过 2 种方式进行操作。一种是通过 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>
于 2014-09-23T14:37:48.773 回答