HightCharts Design with JavaScript

In this example below you will see how to do a HightCharts Design with JavaScript with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 2107, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 2107 ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>HightCharts Design with JavaScript</title>
  
  
  
  
  
</head>

<body>

  <div id="container"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://code.highcharts.com/highcharts.js'></script>
<script src='https://code.highcharts.com/highcharts-more.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/2107/hightcharts-design-with-javascript-bgroQd */
$(function () {
  
Highcharts.chart('container', {
  
  // 차트
  chart: {
    // 종류
    type: 'line',

    // 차트의 너비와 높이 (설정하지 않으면 container 크기가 적용됨)
    // width: 500,
    // height: 250,

    // 범례와의 여백
    spacingTop: 0,
    spacingRight: 20,
    spacingBottom: 0,
    spacingLeft: 0,

    // 차트와의 여백
    marginTop: 10,
    marginRight: 10,
    marginBottom: 50,
    marginLeft: 50,
    
    // 전체 테두리
    borderWidth: 5,
    borderColor: 'gold',
    shadow: {
      color: 'orange', 
      offsetX: 4, 
      offsetY: -2, 
      width: 10,
      opacity: 0.8
    },
    
    // 차트 테두리
    plotBorderWidth: 3,
    plotBorderColor: 'skyblue',
    plotShadow: {
      color: 'lightgreen', 
      offsetX: 0, 
      offsetY: 5, 
      width: 7,
      opacity: 0.5
    },
    
    // 배경
    backgroundColor: '#fcffc5',
    plotBackgroundColor: '#ffffff',
    plotBackgroundImage: 'https://www.highcharts.com/samples/graphics/skies.jpg',
    
    // 글꼴
    style: {
      fontFamily: 'serif'
    }
    
  },
  
  // Highcharts.com 표시
  credits: false,
  
  // 축 레이블 ===== 무슨 차이지?
  labels: {
    aligh: 'right',
    x: -100,
    y: 30
  },
  
  // 범례 (x, y 옵션에서 배치할 수 있음(?))
  legend: {
    align: 'right',  // x축 정렬
    verticalAlign: 'top',  // y축 정렬
    floating: true  // 띄우기
  },
  
  // 제목
  title: {
    text: '일별 변화',
    floating: false,
    align: 'center',
    x: -50,
    y: 30
  },
  
  // 부제목
  subtitle: {
    text: '기여도 및 승률에 관해',
    x: 50,
    y: 35
  },
  
  // x축
  xAxis: {
    categories: ['12/20 <span class="num">2게임</span>', '12/31 <span class="num">6게임</span>', '01/04 <span class="num">10게임</span>', '01/06 <span class="num">1게임</span>', '01/07 <span class="num">3게임</span>'],
    
    labels: {
      // 축 레이블 글꼴 스타일
      style: {
        'color': 'red',
        'cursor': 'pointer',
        'fontSize': '16px'
      }
    },
    
    // 축의 선 스타일
    lineWidth: 2,
    lineColor: 'red',
    
    // 체크 표시 스타일
    tickWidth: 3,
    tickLength: 30,
    tickColor: 'pink',
    tickPosition: 'inside',  // outside || inside
    
    // 이건 뭐지? 작은 체크 표시??
    minorTickColor: 'blue',
    
    // 그리드 선
    gridLineColor: 'brown',
    gridLineWidth: 10,
    
    // 짝수마다 배경색
    alternateGridColor: 'white',
  },
  
  // y축
  yAxis: {
      title: {
          text: 'Temperature (°C)'
      }
  },
  
  // 차트 영역 옵션
  plotOptions: {
    line: {
      dataLabels: {
        enabled: true
      },
      enableMouseTracking: true
    },
    
    series: {
    }
  },
  
  series: [
    {
      name: '기여도/인분',
      data: [50, 40, 85, 60, 50],
      dataLabels: {
        format: '{y}인분'
      },

      // 그림자
      shadow: {
        color: 'blue',
        width: 10,
        offsetX: 0,
        offsetY: 0
      },
      
      // 애니메이션
      animation: {
        duration: 2000,
        easing: 'easeOutBounce'
      }
    }, 
    
    {
      name: '승률/%',
      data: [50, 78, 42, 60, 64],
      dataLabels: {
        format: '{y}%'
      }
    }
  ]
});
  
});

Comments