[JavaScript] 하이차트(HighCharts) 라이브러리를 이용해서 그래프 만들기

JavaScript

[JavaScript] 하이차트(HighCharts) 라이브러리를 이용해서 그래프 만들기

carsumin 2023. 5. 24. 16:11

하이차트 (HighCharts)

순수 자바스크립트로 작성된 차트 라이브러리

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="dataset.js"></script>

</head>
<body>
    <div id="container_scatter" style="min-width: 310px; height: 400px; max-width: 1900px; margin: 0 auto;"></div>
    <div id="container_line" style="height: 400; width: 1900px; margin: 0 auto;"></div>
</body>
</html>

하이차트 라이브러리를 사용하기 위해서 script 추가 필요
div 태그에 id를 할당해서 차트가 들어갈 영역을 만들어줌

$(document).ready(function() {

//임의의 dataset 객체 생성 (A-Z)
const dataObj = {};

for(let i=65; i<=90; i++){
    let alphabet = String.fromCharCode(i);
    let dataArr = [];

    for(let j=0; j<=100; j++){
        let x = parseFloat((Math.random() * 50).toFixed(1));
        dataArr.push([x]);
    }

    dataObj['DATA_' + alphabet] = dataArr;
}

//HighCharts의 series
let seriesData = [];

for(let key in dataObj){
    if(dataObj.hasOwnProperty(key)){

        let series = {
          name: key,
          data: dataObj[key]
        };
  
        seriesData.push(series);
  
    }
}

//HighCharts의 categories
let categories = Object;

//scatter chart
Highcharts.chart('container_scatter', {
    chart: {
      type: 'scatter',
      zoomType: 'xy'
    },
    title: {
      text: 'Sample Scatter Chart'
    },
    xAxis: {
      title: {
        enabled: true,
        text: 'x data',
        align: 'low',
        margin: 50
      },
      startOnTick: true,
      endOnTick: true,
      showLastLabel: true
    },
    yAxis: {
      title: {
        enabled: true,
        text: 'y data',
        align: 'low'
        
      }
    },
    legend: {
      layout: 'horizontal',
      align: 'right',
      verticalAlign: 'bottom',
      x: 0,
      y: 7,
      floating: true,
      itemStyle: {
        fontWeight: 'normal'
      }
    },
    navigation: {
      buttonOptions: {
        theme: {
          states: {
            hover: {
              fill: '#fff'
            },
            select: {
              fill: '#f7f8fa'
            }
          }
        }
      },
      menuItemStyle: {
        fontWeight: 'normal',
        background: 'none'
      },
      menuItemHoverStyle: {
        fontWeight: 'bold',
        background: '#1784B0',
        color: '#fff'
      }
    }, 
    plotOptions: {
      scatter: {
        marker: {
          radius: 3,
          states: {
            hover: {
              enabled: true,
            }
          }
        },
        states: {
          hover: {
            marker: {
              enabled: false
            }
          }
        },
        tooltip: {
          headerFormat: '{series.name}<br>',
          pointFormat: '{point.x}'
        }
      }
    },
    series: seriesData
  });  

  //line chart
  let chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container_line',
      marginBottom: 120
    },
    title: {
      text: 'Sample Line Chart'
    },
    xAxis: {
      categories: categories,
      labels: {
        rotation: 90
      }
    },

    series: seriesData
  });

});

차트에 들어갈 임의의 데이터셋 만들어줌 (소수점 첫째자리의 실수형 데이터)
분산형(scatter), 꺾은선형(line) 두 가지 유형의 차트
데이터셋의 값들을 하이차트의 series 옵션에 할당

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