FAQ

Client Center FAQ

고객님들이 자주 문의하시는 질문에 대한 답변입니다.

HTML5 Chart

Flash Chart

  • 축의 특정 라벨을 굵게 표시할 수 있나요?
  • 축의 특정 label을 굵은 글씨로 표시하고 싶으신 경우, 원하는 축에 labelJsFunction을 사용하여야 합니다.
    +'<horizontalAxis>'
            +'<CategoryAxis categoryField="Month" labelJsFunction="함수이름"/>'
    +'</horizontalAxis>'

    -- html --
    function 함수이름(id, value){
    ex: if(value == "C")
    return "<font size='12' weight='5' color='#ff0000'>" +value+"<b></font>";
    else
    return value
    }
  • 컬럼차트에서 특정 값을 넘어가면 색상을 다르게 표현하고 싶습니다.
  • 특정 조건에 다른 색상을 표현하기 위해서는 fillJsFunction을 사용하셔야 합니다.
    <Column2DSeries yField="Profit" fillJsFunction="fillJsFunc" ...> </Column2DSeries>

    function fillJsFunc(sereisId, index, values)
    {
    예: if(values[0] > 10000
        return "0xFF0000";
    else if(values[0] > 7000
        returnreturn "0xFF6600";
    else
        return "0xFFFF99"; )
    }
  • X축에서 라벨이 겹쳐서 출력될 때는 어떻게 하나요?
  • 다음과 같이 canStagger을 true값으로 입력하면 라벨이 두줄로 출력됩니다. canDropLabels='false' canStagger='true'/>
  • X축에서 라벨이 출력이 되지 않을때는 어떻게 하나요?
  • X 축의 내용이 표현되지 않는 경우에는 X축의 데이터가 겹쳐서 표현되지 않는 경우가 있습니다.
    canDropLabels를 설정하셔서 변경하시면 데이터가 표현됩니다.
    *참조(http://demo.riamore.net/HTML5demo/chart/Samples/CategoryAxis_CanDropLabels.html)
  • 축의 한계값을 임의로 조절할 수 있나요?
  • 축에 maximum(최대값), minimum(최소값)을 입력하여 조절할 수 있습니다.
  • 축에 수식이나 단위를 넣을 수 있나요?
  • CurrencyFormatter를 사용하시면 축에 단위를 표시 할 수 있습니다.
    *참조(http://demo.riamore.net/HTML5demo/chart/Samples/Formatter_Currency.html)
  • 레이더 차트에서 축의 간격을 임의로 조정이 가능 한가요?
  • 레이더 차트의 경우 축의 간격은 interval을 이용하여 동일한 간격으로만 가능합니다.
    <LinearAxis id="rAxis" interval="50" />
  • 라인차트를 사용하는데 Y축의 시작점이 조금씩 다릅니다.
  • Y축의 시작점은 라인의 굵기나, 아이템렌더러의 크기에 따라 자동으로 변합니다.
    만약에 시작점을 고정하고 싶다면, verticalAxis에 minimum 속성을 적용하실 수 있습니다.
    <verticalAxis>
          <LinearAxis minimum="0"/>
    </verticalAxis>
  • 두 개의 Y축을 사용하고 싶습니다.
  • 2개의 축을 이용하여 차트를 표현하기 위해서는 듀얼 축을 사용하시기 바랍니다.
    *참조(듀얼축: http://demo.riamore.net/HTML5demo/chart/Samples/XY_Dual2.html)
  • Column2DChart에서 아이템에 적용된 gradient를 없앨 수 있을까요?
  • 컬럼을 단색으로 표현하기 위해선 그라데이션을 설정하는 GradientEntry에서
    ratio 설정을 통해 하나의 색 비율을 1로 주시면 됩니다.
    <Column2DChart>
          <series>
              <Column2DSeries ..>
                  <fill>
                       <LinearGradient>
                         <entries>
                             <GradientEntry color="#F15F5F" ratio="1"/>
                         </entries>
                       </LinearGradient>
                  </fill>
                  <stroke>
                       <Stroke color="#F15F5F"/> // 테두리 선
                  </stroke>
              </Column2DSeries>
          </series>
    <Column2DChart>
  • 스크롤 차트에서 스크롤이 표현되지 않을 때
  • 스크롤 차트를 사용하기 위해서는 우선 아래의 JS 파일과 CSS파일이 선언되어 있나 확인하여 주시기 바랍니다.
    <--실제적인 rMateChartH5라이브러리-->
    <script language="javascript" type="text/javascript" src="../rMateChartH5/JS/rMateScrollChartH5.js"></script>

    <-- rMateChartH5 에서 사용하는 스타일(범례, 프리로더, 스크롤 차트, 히스토리 차트에 한함) -->
    <link rel="stylesheet" type="text/css" href="../rMateChartH5/Assets/rMateChartH5.css"/>
  • 스크롤 차트의 레이아웃을 설정할 때, 스크롤 바의 색상을 바꿀 수 있을까요?
  • 레이아웃을 설정하여 스크롤 바의 색상을 바꾸는 것은 불가능합니다.
    하지만 제품 폴더의 "Assets" 폴더 안에 있는 이미지 파일을 수정하여 색상을 바꿀 수 있습니다.
    그러나 스크롤 바의 사이즈는 바꿀 수 없으며 모양이나 색상만 바꿀 수 있습니다.
  • 차트 배경에 있는 가로 선의 굵기랑 색상을 바꾸고 싶습니다.
  • backgroundElements에서 horizontalStroke를 설정하시면 됩니다.
    <Column2DChart>
          <series>
              <Column2DSeries../>
          </series>
          <backgroundElements>
              <GridLines direction="horizontal">
                        <horizontalStroke>
              <Stroke color="0xff0000" alpha=".3" weight="1"/>
                            <-- weight:선 굵기, alpha: 투명도 -->
                        </horizontalStroke>
              </GridLines>
          </backgroundElements>
    </Column2DChart>
  • 라인차트에서 중간에 데이터를 넣지 않아도 라인을 이어서 그리도록 하는 것이 가능하나요?
  • 중간에 데이터를 넣지 않고 연속된 라인을 그리고 싶다면, Line2DSeries에 interpolateValue를 설정하셔야 합니다.
    없는 데이터는 null로 설정하시면 됩니다.
    <Line2DChart>
          <series>
              <Line2DSeries interpolateValues="true".. />
          </series>
    </Line2DChart>
  • 라인차트에서 서클 렌더러의 선 굵기와 색상을 변경하고 싶습니다.
  • Line2DSeries에서 stoke의 설정을 통해 변경하실 수 있습니다. 아래는 샘플 코드 입니다.
    <rMateChart>
          <Line2DChart>
              <series>
                        <Line2DSeries itemRenderer="CircleItemRenderer" ..>
                             <stroke>
                                 <Stroke color="0xff0000" weight="1"/>
                             </stroke>
          </Line2DSeries>
                ..
              </series>
          </Line2DChart>
    </rMateChart>
  • 소수점 자리수의 고정이 가능한가요?
  • NumberFormatter를 이용하여 값을 조정할 수 있습니다.
    NumberFormatter의 속성 precision에 원하는 원하는 소수 자릿수를 넣으시면 숫자를 표현할때 자릿수를 통일시켜 보여주게 됩니다.
  • 차트에서 데이터를 동적으로 받아와 레이아웃 옵션에 값을 전달할 수 있나요?
  • Layout을 포함한 XML에서 속성값 만을 변경시킬 수는 없고 JAVA나 JSP에서 XML을 변경하여 적용할 때에 파라메터 값을 변경시켜서
    불러들이는 방법과 String으로 받아오는 경우에는 레이아웃을 변수화하여 값을 가져올 수 있습니다.
    *참조(http://demo.riamore.net/HTML5demo/chart/Samples/Dynamic_Change_Layout.html)
  • 차트의 색과 범례의 색상이 동일하게 표현이 되지 않을때는 어떻게 하나요?
  • fillJsFunction을 쓰면 색상을 여러개 리턴할 수 있는데 그 중에 범례에 대하여 정보를 가져올수 없습니다.
    그래도 꼭 범례를 사용해야 한다면 SubLegend를 이용하시면 됩니다.
    *참조(http://demo.riamore.net/HTML5demo/chart/Samples/Legend_Sub_CheckBox.html)
  • 콤비네이션 차트에서 샘플외에 다른 차트로 차트 제작이 가능한가요?
  • 예제에는 포함되어있지 않은 차트 외에도 다른 차트와의 조합을 통하여 콤비네이션 차트를 만들 수 있습니다.
  • crossRangeZoomer 에서 드래그시 나타나는 색상을 변경하고 싶습니다.
  • <CrossRangeZoomer zoomType="both" enableZooming="true" ...>
                     <zoomRangeFill>
                         <SolidColor color="0xff0000" alpha="0.1"/>
                     </zoomRangeFill>
    </CrossRangeZoomer>
  • label의 길이가 너무 길어서 개행처리를 하고싶습니다.
  • 개행처리를 하기 위해서는 데이터 입력 시 \n을 이용하여 주시기 바랍니다.
    예: var chartData = [{"Month":"rMate\nrMate", "Profit":900}];