WebSquare Studio에서 FusionChart 버블 차트 구현기

 

 

WebSquare Studio에서 FusionChart 버블 차트 구현기

chart예시

 

오늘은 WebSquare Studio에서 FusionChart의 Bubble Chart를 구현하면서 겪은 시행착오와 해결 방법을 정리해보려 합니다. 데이터 바인딩, 텍스트 표시, 색상 처리, 다운로드 기능까지 다양한 이슈를 경험했는데요, 그 과정을 공유합니다.

1. dataList vs ref: 데이터 바인딩 방식

WebSquare에서는 FusionChart에 데이터를 바인딩할 때 dataList 속성이나 ref="data:dcBubble"와 같은 ref 속성을 사용할 수 있습니다.

• dataList: DataCollection을 직접 연결
• ref: WebSquare의 데이터 바인딩 규칙을 따름

하지만 FusionChart는 x, y, z, label, displayValue 구조를 요구하므로, 단순히 ref만 연결해서는 원하는 형태로 출력되지 않았습니다. JavaScript로 데이터를 가공해주는 과정이 필요했습니다.

2. showValues와 displayValue의 관계

버블 안에 텍스트를 표시하려면 showValues와 displayValue의 관계를 이해해야 합니다.

• showValues="1"이면 기본적으로 x 값이 표시됩니다.
• 원하는 텍스트(예: 코드)를 표시하려면 displayValue를 사용해야 합니다.
• 이때 showValues를 "0"으로 꺼야 displayValue가 적용됩니다.

{
  "chart": {
    "showValues": "0"
  },
  "dataset": [{
    "data": [
      { "x": "20", "y": "30", "z": "15", "displayValue": "A" }
    ]
  }]
}

3. series/columns 선언의 중요성

WebSquare Studio에서는 FusionChart를 사용할 때 <series><columns> 선언이 필수입니다. 이 선언이 없으면 차트가 렌더링되지 않거나 버블이 표시되지 않습니다.

<series>
  <columns>
    <column id="x"/>
    <column id="y"/>
    <column id="z"/>
    <column id="label"/>
    <column id="displayValue"/>
  </columns>
</series>

데이터 구조와 이 선언이 일치해야 차트가 정상적으로 작동합니다.

4. 색상 처리: 버블과 텍스트

FusionChart에서는 다음과 같은 방식으로 색상을 제어할 수 있습니다.

• 버블 색상: 각 데이터에 color 속성을 지정하여 개별 설정 가능
• 텍스트 색상: chart.valueFontColor로 전체 텍스트 색상 지정

버블마다 텍스트 색상을 다르게 지정하는 기능은 기본적으로 지원되지 않습니다. 대신 툴팁에 HTML 스타일을 적용해 색상을 다르게 표현할 수 있습니다.

"chart": {
  "valueFontColor": "#FF0000",
  "plotToolText": "<div style='color:#00AAFF'><b>$displayValue</b></div>"
}

5. exportEnabled로 이미지 다운로드 기능 추가

차트를 이미지나 PDF로 저장하려면 exportEnabled 속성을 사용하면 됩니다.

"chart": {
  "exportEnabled": "1",
  "exportFileName": "bubble_chart"
}

이렇게 하면 차트 우측 상단에 Export 메뉴가 생기고, PNG, JPG, SVG, PDF로 저장할 수 있습니다. 또한 JavaScript API를 통해 직접 다운로드를 트리거할 수도 있습니다.

chartInstance.exportChart({ exportFormat: 'png' });

마무리하며

이번 경험을 통해 WebSquare Studio와 FusionChart의 연동 방식, 데이터 구조, 시각화 옵션에 대해 깊이 이해할 수 있었습니다. 특히 displayValue와 showValues의 관계, series/columns 선언의 중요성은 꼭 기억해야 할 포인트입니다.

앞으로도 다양한 차트 유형을 테스트하며 더 나은 시각화를 구현해보고자 합니다.