CFChart все метки оси X не отображаются

Question

У меня есть много 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 ."
    }
            }



        ]
    }
]
}

Answer 1

Вы можете сделать это 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 до создания диаграммы. Установите это значение с помощью атрибута xAxis cfchart, как показано в примере ниже.

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