2014-09-11 89 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