FusionCharts로 다양한 차트 그리기: 예제와 상세 설명

FusionCharts는 웹 애플리케이션에서 데이터를 시각적으로 표현하는 데 강력하고 유연한 도구입니다. 다양한 차트 유형과 직관적인 설정 방식으로 인해 많은 개발자가 활용하고 있습니다. 이 글에서는 FusionCharts를 사용하여 여러 유형의 차트를 구현하는 방법을 자세히 설명합니다.

---

1. FusionCharts 소개

1.1 FusionCharts란?

• HTML5 및 JavaScript 기반의 차트 라이브러리로, 웹 애플리케이션에서 데이터를 시각적으로 표현하는 데 사용됩니다.
• 수백 가지의 차트 유형과 다양한 기능을 제공하며, 모든 주요 브라우저 및 디바이스와 호환됩니다.

1.2 FusionCharts 시작하기

1. FusionCharts 라이브러리 추가
   FusionCharts를 사용하려면 JavaScript 라이브러리를 포함해야 합니다. CDN 링크를 통해 간단히 추가할 수 있습니다.

   <script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
   <script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>

2. HTML 구조 준비
   차트를 렌더링할 HTML 요소를 생성합니다.

   <div id="chart-container"></div>

---

2. 차트 생성 기본 구조

FusionCharts 차트를 생성하려면 다음과 같은 기본 구조를 사용합니다.

FusionCharts.ready(function () {
  var chart = new FusionCharts({
    type: "chartType", // 차트 유형 (예: "column2d")
    renderAt: "chart-container", // 차트를 렌더링할 div ID
    width: "100%", // 차트 너비
    height: "400", // 차트 높이
    dataFormat: "json", // 데이터 형식
    dataSource: {
      // 데이터 및 구성
      chart: {
        caption: "Chart Title",
        subCaption: "Subtitle",
        xAxisName: "X-Axis Label",
        yAxisName: "Y-Axis Label",
        theme: "fusion"
      },
      data: [
        { label: "Category 1", value: "10" },
        { label: "Category 2", value: "20" },
        { label: "Category 3", value: "30" }
      ]
    }
  });
  chart.render();
});

---

3. 다양한 차트 유형과 예제

3.1 막대형 차트 (Column Chart)

단순 2D 막대형 차트

FusionCharts.ready(function () {
  var columnChart = new FusionCharts({
    type: "column2d",
    renderAt: "chart-container",
    width: "100%",
    height: "400",
    dataFormat: "json",
    dataSource: {
      chart: {
        caption: "월간 매출 분석",
        subCaption: "2024년",
        xAxisName: "월",
        yAxisName: "매출 (USD)",
        numberSuffix: "K",
        theme: "fusion"
      },
      data: [
        { label: "1월", value: "30" },
        { label: "2월", value: "50" },
        { label: "3월", value: "40" },
        { label: "4월", value: "70" }
      ]
    }
  });
  columnChart.render();
});

---

3.2 원형 차트 (Pie Chart)

단순 원형 차트

FusionCharts.ready(function () {
  var pieChart = new FusionCharts({
    type: "pie2d",
    renderAt: "chart-container",
    width: "100%",
    height: "400",
    dataFormat: "json",
    dataSource: {
      chart: {
        caption: "브라우저 점유율",
        subCaption: "2024년 1분기",
        theme: "fusion",
        showPercentValues: "1"
      },
      data: [
        { label: "Chrome", value: "60" },
        { label: "Firefox", value: "20" },
        { label: "Safari", value: "10" },
        { label: "Edge", value: "5" },
        { label: "기타", value: "5" }
      ]
    }
  });
  pieChart.render();
});

---

3.3 선형 차트 (Line Chart)

월간 트래픽 분석

FusionCharts.ready(function () {
  var lineChart = new FusionCharts({
    type: "line",
    renderAt: "chart-container",
    width: "100%",
    height: "400",
    dataFormat: "json",
    dataSource: {
      chart: {
        caption: "월간 웹사이트 트래픽",
        subCaption: "2024년",
        xAxisName: "월",
        yAxisName: "방문자 수",
        theme: "fusion"
      },
      data: [
        { label: "1월", value: "1200" },
        { label: "2월", value: "1500" },
        { label: "3월", value: "1700" },
        { label: "4월", value: "2000" }
      ]
    }
  });
  lineChart.render();
});

---

3.4 영역 차트 (Area Chart)

월간 매출 성장

FusionCharts.ready(function () {
  var areaChart = new FusionCharts({
    type: "area2d",
    renderAt: "chart-container",
    width: "100%",
    height: "400",
    dataFormat: "json",
    dataSource: {
      chart: {
        caption: "월간 매출 성장",
        subCaption: "2024년",
        xAxisName: "월",
        yAxisName: "매출 (USD)",
        numberPrefix: "$",
        theme: "fusion"
      },
      data: [
        { label: "1월", value: "5000" },
        { label: "2월", value: "7000" },
        { label: "3월", value: "10000" },
        { label: "4월", value: "15000" }
      ]
    }
  });
  areaChart.render();
});

---

3.5 혼합형 차트 (Combination Chart)

매출 및 수익 비교

FusionCharts.ready(function () {
  var comboChart = new FusionCharts({
    type: "mscombi2d",
    renderAt: "chart-container",
    width: "100%",
    height: "400",
    dataFormat: "json",
    dataSource: {
      chart: {
        caption: "매출 및 수익 비교",
        subCaption: "2024년 1분기",
        xAxisName: "월",
        yAxisName: "금액 (USD)",
        theme: "fusion"
      },
      categories: [
        { category: [{ label: "1월" }, { label: "2월" }, { label: "3월" }] }
      ],
      dataset: [
        {
          seriesName: "매출",
          renderAs: "bar",
          data: [{ value: "20000" }, { value: "25000" }, { value: "30000" }]
        },
        {
          seriesName: "수익",
          renderAs: "line",
          data: [{ value: "5000" }, { value: "8000" }, { value: "12000" }]
        }
      ]
    }
  });
  comboChart.render();
});

---

4. 결론

FusionCharts는 다양한 차트를 직관적으로 생성할 수 있는 강력한 도구입니다. 차트의 종류는 막대형, 원형, 선형, 영역형, 혼합형 등으로 다양하며, 각각의 특성과 활용 사례에 따라 데이터를 효과적으로 시각화할 수 있습니다. FusionCharts를 사용하여 웹 애플리케이션에 데이터를 시각적으로 표현해보세요!