테마 적용하기

한 프로젝트에서 많고 다양한 종류의 차트를 개발할 경우 각 차트의 일관된 디자인 스타일을 유지하면서 개발자들이 디자인적인 요소에 시간을 빼앗기지 않도록 해주는 것이 테마(Theme)입니다. 알메이트 차트에서는 기본적으로 6 가지 테마(simple, cyber, modern, lovely, pastel, old)를 제품과 함께 제공하고 사용자가 원하는 테마를 직접 만들어서 사용할 수도 있습니다. 제공되는 테마 중에서 old 테마는 알메이트 차트 버전 2.5 이하에서 기본적으로 적용되는 디자인 테마입니다.

테마 적용 방법

알메이트 차트에서 기본으로 제공하는 6 가지 테마를 사용하려면 다음과 같이 theme.js 파일을 포함(include)시킵니다. 이 때 반드시 theme.js 파일은 차트 라이브러리(rMateChartH5.js) 보다 나중에 선언되어야 합니다.

<head>
  <link rel="stylesheet" type="text/css" href="../rMateChartH5/Assets/Css/rMateChartH5.css"/>
  <script type="text/javascript" src="../LicenseKey/rMateChartH5License.js"></script>
  <script type="text/javascript" src="../rMateChartH5/JS/rMateChartH5.js"></script>
  <script type="text/javascript" src="../rMateChartH5/Assets/Theme/theme.js"></script>
  ...
</head>

다음은 theme.js 파일을 포함(include)한 이 후 simple 테마를 적용하는 자바스크립트 문장을 실행한 것입니다.

<script>
  …
  document.getElementById("chart1").setTheme("simple");
  …
</script>

테마가 한번 적용된 후, 기본(default) 테마를 다시 적용하기를 원하면 다음 자바스크립트 문장을 실행합니다.

<script>
  …
  document.getElementById("chart1").setTheme("default");
  …
</script>

기본으로 제공되는 6 가지 테마 중에서 특정 테마를 삭제할 수 있습니다. 예를 들어 simple 테마를 삭제할 경우, simple 테마가 적용된 모든 차트는 기본(default) 테마로 돌아옵니다. 이 때 만약 simple 테마가 적용된 차트가 없다면 기본으로 적용되는 6 가지 테마 중에서 simple 테마는 삭제되게 됩니다. 다음은 simple 테마를 삭제하는 자바스크립트 문장을 실행한 것입니다.

<script>
  …
  rMateChartH5.removeTheme("simple");
  …
</script>

사용자 정의 테마

사용자가 원하는 테마를 직접 등록하고 이를 적용할 수 있습니다. 다음은 MyTheme.js 파일에 myTheme 이라는 테마를 생성하고 이를 적용하는 예제입니다.

(function() {
  var myTheme
  function themeExtend(target, obj) {
    for (var o in obj) {
      if(!target[o])
        target[o] = obj[o];
      }
    }
  function intoProp(prop, theme, colors, alpha, weight, gradient) {
    var i, n, o, color;
    if (alpha == null || alpha == undefined)
      alpha = 1;
    if (weight == null || weight == undefined)
      weight = 1;
    if (gradient == null || gradient == undefined)
      gradient = false;
    for (i = 0, n = colors.length ; i < n ; i += 1) {
      color = colors[i % colors.length];
      if (!gradient) {
        o = { color : color, weight : weight, alpha : alpha};
      } else {
        o = {};
        o.angle = 90;
        o.entries = [];
        o.entries.push({ color : color, ratio : 1, alpha : alpha});
      }
      if (!theme.series[i])
        theme.series[i] = {};
      theme.series[i][prop] = o;
    }
  }
  rMateChartH5.themes = {};
  rMateChartH5.setupTheme = {};
  rMateChartH5.setupTheme.myTheme = {
    defaultColors : [
      "#3BA0CC","#775F47","#A8C545","#DDCFAC","#777777","#9FB5CD","#2AA2A0","#37C07C","#3F596E","#7E92A5","#A48D70","#77B6D0","#CEE4ED","#555555",
      "#B195A6","#D4C4CE","#67425A","#B9DCDA","#3798B9","#89D5AF","#869726","#C1CC89","#836E2C","#C5BA8E","#816D5B","#DEE3E7","#84929F","#3B4B5B"
    ],
    chartCommon : {
      dataTipBackgroundColorOnSeries : false,
      dataTipBorderColor : "#323232"
    },
    barChart : {
      backgroundElements : [{
        direction : "vertical",
        verticalStroke : {"color":"#ececec"}
      }],
    }
  };
  myTheme = rMateChartH5.setupTheme.myTheme;
  themeExtend(myTheme.barChart, myTheme.chartCommon);
  rMateChartH5.setupTheme.myTheme = {
    defaultColors : myTheme.defaultColors,
    Column2DChart : myTheme.chartCommon,
    Pie2DChart : myTheme.chartCommon,
    Plot2DChart : myTheme.chartCommon,
    Bar2DChart : myTheme.barChart
  };
})();

위와 같이 MyTheme.js 파일을 작성한 다음, 아래와 같이 이를 포함(include)하여 myTheme 테마를 적용할 수 있습니다.

<head>
  <link rel="stylesheet" type="text/css" href="../rMateChartH5/Assets/Css/rMateChartH5.css"/>
  <script type="text/javascript" src="../LicenseKey/rMateChartH5License.js"></script>
  <script type="text/javascript" src="../rMateChartH5/JS/rMateChartH5.js"></script>
  <script type="text/javascript" src="./MyTheme.js"></script>
  ...
  <script>
    ...
    document.getElementById("chart1").setTheme("myTheme");
    ...
  </script>
</head>

목차

테마 적용하기

테마 적용 방법

사용자 정의 테마