Skip to main content

설치

시작하기에 앞서​

DashBuilder를 사용하기 위해 필수 파일들을 먼저 include해야 합니다.

warning

DashBuilder는 다른 모듈에 의존성이 있으므로, 다음 순서로 모듈을 로드해야 합니다:

  1. IBSheet
  2. IBChart
  3. IBMap
  4. DashBuilder

잘못된 로딩 순서는 대시보드 초기화 실패나 런타임 오류의 원인이 될 수 있습니다.

IBSheet​

<script type="text/javascript" src="./js/ibsheet/ibsheet.js"></script>
<script type="text/javascript" src="./js/ibsheet/locale/ko.js"></script>
<script type="text/javascript" src="./js/ibsheet/locale/en.js"></script>
<script type="text/javascript" src="./js/ibsheet/locale/jp.js"></script>
<script type="text/javascript" src="./js/ibsheet/locale/cn.js"></script>
<link rel="stylesheet" type="text/css" href="./js/ibsheet/css/default/main.css"/>
<link rel="stylesheet" type="text/css" href="./js/ibsheet/css/default_img/main.css"/>
<link rel="stylesheet" type="text/css" href="./js/ibsheet/css/grace/main.css"/>
<link rel="stylesheet" type="text/css" href="./js/ibsheet/css/gray/main.css"/>
<link rel="stylesheet" type="text/css" href="./js/ibsheet/css/material/main.css"/>
<link rel="stylesheet" type="text/css" href="./js/ibsheet/css/mint/main.css"/>
<link rel="stylesheet" type="text/css" href="./js/ibsheet/css/simple/main.css"/>

IBChart​

<script type="text/javascript" src="./js/ibchart/highcharts/highcharts.js"></script>
<script type="text/javascript" src="./js/ibchart/highcharts/highcharts-more.js"></script>
<script type="text/javascript" src="./js/ibchart/highcharts/modules/solid-gauge.js"></script>
<script type="text/javascript" src="./js/ibchart/ibchartinfo.js"></script>
<script type="text/javascript" src="./js/ibchart/ibchart.js"></script>

IBMap​

<link rel="stylesheet" type="text/css" href="./js/ibmap/css/ibmap.css" />
<script type="text/javascript" src="./js/ibmap/ibmap.js"></script>

DashBuilder​

DashBuilder는 구동에 필요한 js파일과 언어팩 locale파일들(en.js, ko.js)로 구성되어 있습니다.

├── dashbuilder.js
└── locale/
    ├── ko.js
    └── en.js
<script type="text/javascript" src="./js/dashbuilder/dashbuilder.js"></script>
<script type="text/javascript" src="./js/dashbuilder/locale/ko.js"></script>
<script type="text/javascript" src="./js/dashbuilder/locale/en.js"></script>

Dashboard 객체 생성​

대시보드 객체 생성은 대시보드가 만들어질 컨테이너가 구성된 이후에 설정 할 수 있습니다.

body 태그 하위에 컨테이너로 사용할 div를 생성 하고, body 태그의 onload 이벤트로 생성합니다.

초기 생성할 경우​

<html>
  <head>
    <!-- 필수 라이브러리 include 코드 -->
  </head>
  <body onload="initDashboard()">
    <h1>Dashboard</h1>
    <div id="dashboard"></div>
    
    <script type="text/javascript">
      function initDashboard() {
        DashBuilder.create({
          id: "dash1",
          el: document.getElementById("dashboard"), 
          info: {
            options: {
              children: [],
            },
            dataSets: [],
          }
        });
      }
    </script>
  </body>
</html>

데이터가 있는 경우 로드​

Dashboard 객체의 설정 정보들은은 serialize API를 통해 JSON형태로 저장되며, 가져올 때 deserialize API를 통해 JSON을 파싱해서 DashBuilder 옵션에 설정하는 방식으로 진행됩니다.

아래 예제는:

  1. 대시보드의 구성 정보(레이아웃, 위젯 배치, 설정 등)를 localStorage에 저장하고 불러오는 방식을 보여줍니다.
  2. 저장된 구성 정보가 없는 경우 빈 대시보드를 생성합니다.
  3. 저장된 구성 정보가 있는 경우 이를 파싱하여 대시보드를 복원합니다.
  4. 대시보드 구성 정보를 저장하는 함수를 제공합니다.
<html>
  <head>
    <!-- 필수 라이브러리 include 코드 -->
    <script type="text/javascript">
      document.addEventListener("DOMContentLoaded", function () {
        // localStorage에서 저장된 대시보드 구성 정보 불러오기
        let savedDashboardConfig = window.localStorage.getItem("save-dashboard-info");

        if (savedDashboardConfig == null) {
          // 저장된 대시보드 구성이 없는 경우 빈 대시보드 생성          
          DashBuilder.create({
            id: "dash1",
            el: document.getElementById("dashboard"), 
            info: {
              options: {
                children: []
              },
              dataSets: []
            }
          });
        } else {
          // 저장된 대시보드 구성 정보가 있는 경우 복원
          let dashboardConfig = JSON.parse(savedDashboardConfig);
          // 저장된 구성으로 대시보드 생성
          DashBuilder.create({ id: "dash1", el: document.getElementById("dashboard"), info: dashboardConfig });
        }
      });
    </script>
  </head>
  <body>
    <h1>Dashboard</h1>
    <div id="dashboard" style="width:100%; height:600px;"></div>
    <button onclick="window.localStorage.setItem('save-dashboard-info', DashBuilder.get().serialize());">대시보드 저장</button>
  </body>
</html>

통합 예제​

이 예제는 IBSheet, IBChart, IBMap, DashBuilder를 모두 포함하고 있으며, 간단한 차트 위젯이 있는 대시보드를 생성합니다. 샘플 데이터셋을 사용하여 월별 매출 데이터를 시각화하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>DashBuilder 통합 예제</title>
  
  <!-- IBSheet -->
  <link rel="stylesheet" type="text/css" href="./js/ibsheet/css/default/main.css"/>
  <script type="text/javascript" src="./js/ibsheet/ibsheet.js"></script>
  <script type="text/javascript" src="./js/ibsheet/locale/ko.js"></script>
  
  <!-- IBChart -->
  <script type="text/javascript" src="./js/ibchart/highcharts/highcharts.js"></script>
  <script type="text/javascript" src="./js/ibchart/highcharts/highcharts-more.js"></script>
  <script type="text/javascript" src="./js/ibchart/highcharts/highcharts-more.js"></script>
  <script type="text/javascript" src="./js/ibchart/highcharts/modules/solid-gauge.js"></script>
  <script type="text/javascript" src="./js/ibchart/ibchartinfo.js"></script>
  <script type="text/javascript" src="./js/ibchart/ibchart.js"></script>
  
  <!-- IBMap -->
  <link rel="stylesheet" type="text/css" href="./js/ibmap/css/ibmap.css" />
  <script type="text/javascript" src="./js/ibmap/ibmap.js"></script>
  
  <!-- DashBuilder -->
  <script type="text/javascript" src="./js/dashbuilder/dashbuilder.js"></script>
  <script type="text/javascript" src="./js/dashbuilder/locale/ko.js"></script>
  <script type="text/javascript" src="./js/dashbuilder/locale/en.js"></script>
  
  <style>
    #dashboard {
      width: 100%;
      height: 800px;
      border: 1px solid #ddd;
    }
  </style>
</head>
<body>
  <h1>DashBuilder 예제</h1>
  <div id="dashboard"></div>
  
  <script type="text/javascript">
    // 샘플 데이터셋
    const sampleDataSet = {
      "sales": [
        { "month": "Jan", "value": 1000 },
        { "month": "Feb", "value": 1500 },
        { "month": "Mar", "value": 1200 }
      ]
    };
    
    document.addEventListener("DOMContentLoaded", function() {
      // 대시보드 생성
      DashBuilder.create({
        id: "dash1",
        el: document.getElementById("dashboard"), 
        info: {
          options: {
            title: "샘플 대시보드",
            children: [
              {
                id: "chart_1",
                type: "chart",
                kind: "column",
                style: "column",
                dataOptions: {
                  dataSetId: "sales",
                  categories: [ "month" ],
                  series: [ "value" ]
                },
                options: {
                  ko: {
                    chart: {
                      type: "column",
                      borderWidth: 0,
                      backgroundColor: "transparent"
                    },
                    colors: [ "#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf" ],
                    plotOptions: {
                      series": {
                        showInLegend: true,
                        colorByPoint: false
                      }
                    },
                    xAxis: {
                      visible: true,
                      minRange: 1,
                      title: {
                        text: "",
                        align: "middle",
                        style: {
                          fontSize: 12,
                          fontWeight: "bold",
                          color: "#4d759e"
                        }
                      }
                    },
                    yAxis: {
                      visible: true,
                      title: {
                        text: "",
                        align: "middle",
                        style: {
                          fontSize: 12,
                          fontWeight: "bold",
                          color: "#4d759e"
                        }
                      }
                    },
                    title: {
                      style: {
                        fontSize: 16,
                        fontWeight: "normal",
                        color: "#274b6d"
                      },
                      text: "월별 매출",
                      align: "center",
                      verticalAlign: "top"
                    },
                    subtitle: {
                      style: {
                        fontSize: 12,
                        fontWeight: "normal",
                        color: "#000000"
                      },
                      text: "",
                      align: "center",
                      verticalAlign: "top"
                    },
                    legend: {
                      align: "center",
                      verticalAlign: "bottom",
                      layout: "horizontal"
                    }
                  }
                }
              }
            ]
          },
          dataSets: [
            {
              id: "sales",
              name: "월별 매출액",
              keyMap: {
                "month": { Header: "월", Type: "Text" },
                "value": { Header: "매출", Type: "Int" }
              }
              data: sampleDataSet.sales
            }
          ]
        }
      });
    });
  </script>
</body>
</html>