이로

HIGHCHART 본문

컴퓨터/사용했던 기술 정리

HIGHCHART

利路 2020. 12. 14. 14:23
반응형

HIGHCHART 사용후기

  • 다양한 차트가 존재
  • 개발 참고문서가 잘 되어있다.
  • 사소한것 하나하나까지 컨트롤이 가능했다.
    • ex) 라인 높이, 차트 높낮이, x축 이름, y축 이름설정, 글자수 제한, 차트에 표현할 숫자 또는 문구 등
  • 샘플페이지에 기본으로 구현된 것에서 직접 이것저것 옵션을 추가해보며 테스트 해 볼 수 있다.
    • ex) Heatmap 차트를 샘플로 구현해보고싶을 경우 www.highcharts.com/demo/heatmap페이지 에서 EDIT IN CODEPEN 을 들어가면 선택한 차트의 Default값이 세팅되어 있고, 옵션들을 추가해보며 되는지 안되는지 어떻게 변하는지 체크해 볼 수 있다. 자세한 방법은 아래 스크린샷으로 첨부한다.

샘플코드 보는 적용해보는 방법

 

위 사진에서 EDIT IN CODEPEN 클릭시 아래 화면이 나타난다. 

 

사용했던 차트들중 유용하게 사용했던 차트 사용방법 및 옵션 주석

 영어를 잘 못해 하나하나 번역기 돌리고, 코드 테스트를 해 가며 찾은 사용했던 옵션들이다. 수많은 옵션 중 극히 일부만 사용하였다. 자세한 옵션에 대한 설명은 JS API Reference ( api.highcharts.com/highcharts/ )를 참고하면 된다.

Basic Line Chart

1. Sample Image

www.highcharts.com/demo/line-basic

 

2. HTML ELEMENT

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
  <!-- 차트 입력할 DIV -->
  <div id="container"></div>
  <!-- 차트 설명 -->
  <p class="highcharts-description">
    Basic line chart showing trends in a dataset. This chart includes the
    <code>series-label</code> module, which adds a label to each line for
    enhanced readability.
  </p>
</figure>

 

3. JS

// 차드가 들어갈 Div id 입력
Highcharts.chart('container', {
  /* 차트 타이틀 */
  title: {
    text: 'Solar Employment Growth by Sector, 2010-2016'
  },
  /* 차트 서브타이틀, 링크 이동 가능 */
  subtitle: {
    text: 'Source: thesolarfoundation.com'
  },
  /* Y축 */
  yAxis: {
    /* Y축 타이틀*/
    title: {
      text: 'Number of Employees'
    }
  },
  /* X축 */
  xAxis: {
    accessibility: {
      rangeDescription: 'Range: 2010 to 2017'
    }
    , type:"datetime"
    , dateTimeLabelFormats : {
      day: '%Y. %m. %e'
    }
  },
  /* 범례 */
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
  },

  plotOptions: {
    series: {
      label: {
        connectorAllowed: false // 선과 라벨 연결여부 (true : 연결, false : 미연결)
      },
      pointStart: 2010 // X축 시작 값 (맨 왼쪽 값, +1씩 올라간다) // 날짜나 다른 유형으로 변경하고 싶을 경우 Axis 의 타입을 설정하면된다. type : 'datetime'
      // pointStart: Date.UTC(2010, 0, 1), Axis 타입 datetime 일 경우 주석한 2개 사용
      // pointInterval: 24 * 3600 * 1000 
    }
  },
  /* 데이터 형식 */
  series: [{
    name: 'Installation',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
  }, {
    name: 'Manufacturing',
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
  }, {
    name: 'Sales & Distribution',
    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
  }, {
    name: 'Project Development',
    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
  }, {
    name: 'Other',
    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
  }],

  responsive: {
    rules: [{
      condition: {
        maxWidth: 500
      },
      chartOptions: {
        legend: {
          layout: 'horizontal',
          align: 'center',
          verticalAlign: 'bottom'
        }
      }
    }]
  }

});

 

Column with rotated labels

1. Sample Image

www.highcharts.com/demo/column-rotated-labels

 

2. HTML ELEMENT

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
 
<figure class="highcharts-figure">
  <!-- 차트 Div -->
  <div id="container"></div>
  <!-- 차트 설명  -->
  <p class="highcharts-description">
    Chart showing use of rotated axis labels and data labels. This can be a
    way to include more labels in the chart, but note that more labels can
    sometimes make charts harder to read.
  </p>
</figure>

 

3. JS

// 차트가 들어갈 Div Id 입력
Highcharts.chart('container', {
  /* 차트 정의 */
  chart: {
    type: 'column'
  },
  /* 차트 타이틀 */
  title: {
    text: 'World\'s largest cities per 2017'
  },
  /* 차트 서브 타이틀, 링크 이동 가능 */
  subtitle: {
    text: 'Source: <a href="http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'
  },
  /* X축 컬럼 */
  xAxis: {
    type: 'category',
    labels: {
      rotation: -45, // 라벨 기울기
      style: {
        fontSize: '13px', // X축 폰트 사이즈
        fontFamily: 'Verdana, sans-serif' // X축 폰트
      }
    }
  },
  /* Y축 컬럼 */
  yAxis: {
    min: 0, // 최소값
    title: {
      text: 'Population (millions)' // Y축 타이틀
    }
  },
  /* 범례 사용 X */
  legend: {
    enabled: false
  },
  /* 데이터에 마우스 오버시 나타나는 상세 출력 형식 */
  tooltip: {
    pointFormat: 'Population in 2017: <b>{point.y:.1f} millions</b>'
  },
  /* 차트 데이터 */
  series: [{
    name: 'Population',
    /* [[x축컬럼 1, 데이터1], [x축컬럼 2, 데이터2], ... ]*/
    data: [
      ['Shanghai', 24.2],
      ['Beijing', 20.8],
      ['Karachi', 14.9],
      ['Shenzhen', 13.7],
      ['Guangzhou', 13.1],
      ['Istanbul', 12.7],
      ['Mumbai', 12.4],
      ['Moscow', 12.2],
      ['São Paulo', 12.0],
      ['Delhi', 11.7],
      ['Kinshasa', 11.5],
      ['Tianjin', 11.2],
      ['Lahore', 11.1],
      ['Jakarta', 10.6],
      ['Dongguan', 10.6],
      ['Lagos', 10.6],
      ['Bengaluru', 10.3],
      ['Seoul', 9.8],
      ['Foshan', 9.3],
      ['Tokyo', 9.3]
    ],
    /* 차트(막대) 안의 데이터 값 표현 방식*/
    dataLabels: {
      enabled: true, // 차트(막대) 안의 데이터 표기 여부 (true : 표기, false : 미표기)
      rotation: -90, // 차트(막대) 안의 데이터 텍스트 각도
      color: '#FFFFFF', // 차트(막대) 안의 데이터 텍스트 색상
      align: 'right', // 정렬
      format: '{point.y:.1f}', // one decimal
      y: 10, // 10 pixels down from the top
      style: {
        fontSize: '13px',
        fontFamily: 'Verdana, sans-serif'
      }
    }
  }]
});

 

Heat Map

1. Sample Image

www.highcharts.com/demo/heatmap

 

2. HTML ELEMENT

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
 
<figure class="highcharts-figure">
  <!-- 차트 div -->
  <div id="container"></div>
  <!-- 차트 하단 문구 작성 -->
  <p class="highcharts-description">
    Heatmap showing employee data per weekday. Heatmaps are commonly used to
    visualize hot spots within data sets, and to show patterns or correlations.
    Due to their compact nature, they are often used with large sets of data.
  </p>
</figure>

 

3. JS

function getPointCategoryName(point, dimension) {
  var series = point.series,
    isY = dimension === 'y',
    axis = series[isY ? 'yAxis' : 'xAxis'];
  return axis.categories[point[isY ? 'y' : 'x']];
}
 
Highcharts.chart('container', {
/* 차트 정의 */
  chart: {
    type: 'heatmap', // 차트 타입
    marginTop: 40, // 차트 영역 내에서 margin-top
    marginBottom: 80, // 차트 영역 내에서 margin-bottom
    plotBorderWidth: 1 // 차트 영역 가장자리 두께
  },
 
/* 차트 타이틀 */
  title: {
    text: 'Sales per employee per weekday'
  },
/* 차트 X축 컬럼 명 */
  xAxis: {
    categories: ['문서', '이미지', '동영상', '음원', '링크', '유튜브', '웹콘텐츠', '인터렉티브', '복합형', '패키지']
  },
/* 차트 Y축 컬럼 명 */
  yAxis: {
    categories: ['20.07.01', '20.07.02', '20.07.03', '20.07.04', '20.07.05'],
    title: null,
    reversed: true // true : categories 의 마지막 컬럼이 y축 하단부터 작성됨, false : 반대
  },
/* 역할 잘 모르겠음, 지워도 별 다른 변경사항 발견하지 못함. */
  accessibility: {
    point: {
      descriptionFormatter: function (point) {
        var ix = point.index + 1,
          xName = getPointCategoryName(point, 'x'),
          yName = getPointCategoryName(point, 'y'),
          val = point.value;
        return ix + '. ' + xName + ' sales ' + yName + ', ' + val + '.';
      }
    }
  },
/* 차트 백그라운드 색상*/
  colorAxis: {
    min: 0,
    minColor: '#FFFFFF',
    maxColor: Highcharts.getOptions().colors[0]
  },
/* 오른쪽 범례 바 컨트롤 */
  legend: {
    align: 'right',
    layout: 'vertical',
    margin: 0,
    verticalAlign: 'top',
    y: 25,
    symbolHeight: 280
  },
/* 데이터에 마우스 오버시 나타나는 상세 출력 형식 */
  tooltip: {
    formatter: function () {
      return '<b>' + getPointCategoryName(this.point, 'x') + '</b> sold <br><b>' +
        this.point.value + '</b> items on <br><b>' + getPointCategoryName(this.point, 'y') + '</b>';
    }
  },
/* 차트 데이터 */
  series: [{
    name: 'Sales per employee', // 차트 제목
    borderWidth: 1, // 차트 경계 두께
    /* 차트 데이터 [0,0,10] -> 좌표평면 (0,0) 의 데이터 값은 10 */
    data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
    dataLabels: {
      enabled: true, // 차트 칸에 데이터 값 출력 여부 (true : 출력, false : 색상만 출력)
      color: '#000000' // 차트 데이터 글자 색상
    }
  }],
 
  responsive: {
    rules: [{
      condition: {
        maxWidth: 500
      },
      chartOptions: {
        yAxis: {
          labels: {
            formatter: function () {
              return this.value.charAt(0);
            }
          }
        }
      }
    }]
  }
 
});

 

반응형
저작자표시 비영리 변경금지

'컴퓨터 > 사용했던 기술 정리' 카테고리의 다른 글

Httpd Proxy 설정 (하나의 IP 여러 도메인 연결)  (0) 2020.11.24
SPRING JPA 다중DB 접속  (0) 2020.05.28
'컴퓨터/사용했던 기술 정리' Related Articles more
Comments