라인은 내가이 차트를 통해 두 개의 수직선을 추가하기 위해 노력하고있어

Question

,

<cfchartseries type="line" seriescolor="Red"> 
           <cfloop index="ScoringPercent" array="#ScoringPercents[1]#" > 

            <cfchartdata item="#ScoringPercent#" value="74" > 

           </cfloop> 
          </cfchartseries> 


          <cfchartseries type="line" seriescolor="Yellow"> 
           <cfloop index="ScoringPercent" array="#ScoringPercents[1]#" > 

            <cfchartdata item="#ScoringPercent#" value="53" > 

           </cfloop> 
          </cfchartseries 

기이, 그것은 차트

위의 라인을 추가 ? 라인이 74 라인과 53 라인에 걸쳐 있어야하지 않습니까?

Answer 1

누적 막대 그래프를 사용하면 추가하는 모든 시리즈가 서로 위에 표시됩니다.

따라서 빨간색 선 계열은 100 포인트 표시보다 74 포인트 (Y 축의 174 포인트 표시)의 막 대형 차트 위에 있습니다. 유사하게 노란색 선 계열은 빨간색 선 위 53 점 (Y 축의 227 점 표시) 위에 있습니다.

업데이트

당신의 ColdFusion 버전 10에 당신이 이런 식으로 작업을 수행 할 수 있습니다 위의 경우. ColdFusion 버전 10부터 ColdFusion은 JSON 스타일 파일을 통해 더 많은 사용자 정의를 허용하는 ZingCharts를 사용합니다. 참고 :이 코드는 사용자 코드 코드로 바꿔야합니다.

<cfset arr1 = [10,20,30,40,50] /> 
<cfset arr2 = [20,10,60,70,30] /> 
<cfset arr3 = [90,50,40,10,80] /> 

<cfchart chartwidth="1000" chartheight="750" format="html" style="LineStackedBar.json"> 

    <cfchartseries type="Bar" seriescolor="Green"> 

     <cfloop index="ScoringPercent2" array="#arr1#" > 

      <cfchartdata item="#ScoringPercent2#" value="#ScoringPercent2#"> 

     </cfloop> 

    </cfchartseries> 

    <cfchartseries type="Bar" seriescolor="Yellow"> 

     <cfloop index="ScoringPercent2" array="#arr2#" > 

      <cfchartdata item="#ScoringPercent2#" value="#ScoringPercent2#"> 

     </cfloop> 

    </cfchartseries> 

    <cfchartseries type="Bar" seriescolor="Red"> 

     <cfloop index="ScoringPercent2" array="#arr3#" > 

      <cfchartdata item="#ScoringPercent2#" value="#ScoringPercent2#"> 

     </cfloop> 

    </cfchartseries> 

    <cfchartseries type="line" seriescolor="Red"> 
     <cfloop index="ScoringPercent2" array="#arr3#" > 

      <cfchartdata item="#ScoringPercent2#" value="74" > 

     </cfloop> 
    </cfchartseries> 


    <cfchartseries type="line" seriescolor="Yellow"> 
     <cfloop index="ScoringPercent2" array="#arr2#" > 

      <cfchartdata item="#ScoringPercent2#" value="53" > 

     </cfloop> 
    </cfchartseries> 

</cfchart> 

LineStackedBar.json 그것은 다음과 같은 출력을 생성

{ 
"graphset":[ 
    { 
     "legend":{ 
      "position":"30%, 0%", 
      "border-color":"#CCCCCC", 
      "background-color":"#FFFFFF", 
      "margin-top":40, 
      "layout":"x4", 
      "shadow":false, 
      "alpha":1 
     }, 
     "border-color":"#cccccc", 
     "tooltip":{ 
      "font-size":11, 
      "font-color":"#FFFFFF", 
      "bold":true, 
      "font-family":"Helvetica", 
      "padding":5 
     }, 
     "series":[ 
      { 
       "hover-state":{ 
        "visible":false 
       }, 
       "shadow-blur-y":1, 
       "shadow-color":"#cccccc", 
       "shadow-alpha":1, 
       "shadow":true, 
       "background-color-2":"#FFCF8C", 
       "background-color":"#735328", 
       "type":"bar", 
       "stacked":"true", 
       "shadow-distance":2, 
       "shadow-blur-x":2 
      }, 
      { 
       "hover-state":{ 
        "visible":false 
       }, 
       "shadow-blur-y":1, 
       "shadow-color":"#cccccc", 
       "shadow-alpha":1, 
       "shadow":true, 
       "background-color-2":"#FEFFD1", 
       "background-color":"#9D9C5D", 
       "type":"bar", 
       "stacked":"true", 
       "shadow-distance":2, 
       "shadow-blur-x":2 
      }, 
      { 
       "hover-state":{ 
        "visible":false 
       }, 
       "shadow-blur-y":1, 
       "shadow-color":"#cccccc", 
       "shadow-alpha":1, 
       "shadow":true, 
       "background-color-2":"#FEFFD1", 
       "background-color":"#9D9C5D", 
       "type":"bar", 
       "stacked":"true", 
       "shadow-distance":2, 
       "shadow-blur-x":2 
      }, 
      { 
       "hover-state":{ 
        "visible":false 
       }, 
       "line-color":"#699EBF", 
       "border-color":"#699EBF", 
       "line-width":3, 
       "type":"line", 
       "stacked":"false" 
      }, 
      { 
       "hover-state":{ 
        "visible":false 
       }, 
       "line-color":"#143F59", 
       "border-color":"#143F59", 
       "line-width":3, 
       "type":"line", 
       "stacked":"false" 
      } 
     ], 
     "plotarea":{ 
      "margin-top":80, 
      "margin-left":70, 
      "margin-right":30 
     }, 
     "3d-aspect":{ 
      "true3d":false 
     }, 
     "background-color":"white", 
     "border-width":1, 
     "plot":{ 
      "hover-marker":{ 
       "background-color":"#888888", 
       "size":3 
      }, 
      "marker":{ 
       "background-color":"#cccccc", 
       "size":3 
      }, 
      "preview":true, 
      "tooltip-text":"%v" 
     }, 
     "type":"mixed", 
     "title":{ 
      "border-width":1, 
      "border-color":"#cccccc", 
      "background-color":"white", 
      "font-size":18, 
      "bold":true, 
      "font-family":"Helvetica", 
      "color":"#333333" 
     } 
    } 
] 
} 

:

마이크의 대답 CfChart Stacked bars and unstacked Lines