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

Question

У меня есть много cfcharts в моем приложении. В одном из моих cfcharts имеется 32 метки X-оси, но отображаются только 18 из них. Помимо этого диаграмма отображается правильно, но метки на оси X отсутствуют.

Я использовал стиль JSON для применения стилей к диаграмме, а атрибут Items-OverlapScaleX установлен в 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> 

Edit JS Style

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