2014-09-11 59 views
0

我的應用程序中有很多cfcharts。在我的一個cfcharts中有32個X軸標籤,但只有18個正在顯示。除此之外,圖表正確顯示,但x軸標籤丟失。CFChart所有的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 ." 
    } 
      } 



     ] 
    } 
] 
} 
+0

您可以發佈一個示例圖表代碼和風格 – 2014-09-22 22:06:05

+0

@AlanBullpitt我已經張貼了我的CF代碼和js樣式,請see.I注意到一兩件事,當我改變cfchart到HTML時,它顯示的所有x軸的格式標籤和我的mouseHover也工作。但是當我改變爲JPG我的盤旋和標籤沒有按預期工作。請幫助我。這是非常迫切 – Lakshmi 2014-09-23 11:57:42

+0

@AlanBullpitt我需要使用這些圖表來查看pdf.as你知道cfchart將不會顯示在cfdocument。但是,當我將格式更改爲JPG(並保存),然後它的內部cfdocument工作。 – Lakshmi 2014-09-23 12:06:30

回答

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

你能告訴我有沒有什麼辦法可以讓cold axis11中的json更具動態性?我發佈了我的問題和代碼 – Lakshmi 2014-10-03 05:01:26