[JS]게이지 그래프 만들기

728x90

http://bernii.github.io/gauge.js/

Guege.js를 사용하여

옵션에 따라 눈금의 설정, 시침설정, 그래프 모양 등을 옵션으로 지정할수 있다.

[샘플소스]

<html>
<head>
  <title>gauge</title>    
</head>
    
    
<body>
    <br><br><br><br><br><br><br>
<div id="preview">
    <canvas width=380 height=150 id="foo"></canvas>
    <div id="preview-text"></div>
</div>
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script src="dist/gauge.js"></script>
    
<script>
   
    var opts = {
    angle: 0,
    lineWidth: 0.3,
    radiusScale: 1,         // Relative radiu
    pointer: {              //표시선
        length: 0.6,
        strokeWidth: 0.05,
        color: '#000000'
        /*
        iconPath: 'myicon.png',  // Icon image source
        iconScale: 1,           // Size scaling factor
        iconAngle: 90.0         // Rotation offset angle, degrees
        */
    },
    staticZones: [          //구분(색상및 최소값, 최대값)
     {strokeStyle: "#FFDD00", min: -20, max: 0, height: 1},
     {strokeStyle: "#30B32D", min: 0, max: 20, height: 1}
    ],
    staticLabels: {         //둘레밖에 값을 표시
      font: "10px sans-serif",          //font
      labels: [-20, -10, 0, 10, 10],  // Print labels at these values
      color: "#000000",                 // Optional: Label text color
      fractionDigits: 0                 // Optional: Numerical precision. 0=round off.
    },
    renderTicks: {          //둘레안을 표시
      divisions: 3,                     //표시선 등분 3 = 3등분
      divWidth: 1.1,                    //표시선 두께
      divLength: 0.7,                   //표시선 바깥에서 안쪽으로 길이
      divColor: "#333333",              //표시선 색상
      subDivisions: 4,                  //표시선 등분안의 작은등분 4은 3등분의 4등분
      subLength: 0.2,                   //표시선 등분안의 작은등분의 바깥에서 안쪽으로 길이
      subWidth: 0.6,                    //표시선 등분안의 작은등분의 두께
      subColor: "#666666"               //표시선 등분안의 작은등분의 색상
    },
    limitMax: false,
    limitMin: false,
    strokeColor: '#E0E0E0',
    highDpiSupport: true
    };

    var target = document.getElementById('foo');        // your canvas element
    var gauge = new Gauge(target).setOptions(opts);    // create sexy gauge!
    gauge.setTextField(document.getElementById("preview-text"));
    gauge.maxValue = 20;       // set max gauge value
    gauge.setMinValue(-20);    // Prefer setter over gauge.minValue = 0
    gauge.animationSpeed = 10;  // set animation speed (32 is default value)
    gauge.set(0);            // set actual value
    
    
    
    
    //값을 바꾸는 함수
    function changeval(val){
        gauge.set(parseInt(val));
      	AnimationUpdater.run();
    }
    
    //1초마다 타이머함수
    var timer = setInterval(() => {
        
        changeval(getRandomInt(-20,20));
    }, 1000);
    
    //숫자를 랜덤으로 뽑아오는 함수
    function getRandomInt(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min) + min); // The maximum is exclusive and the minimum is inclusive
    }

</script>
</body>
</html>

위의 소스를 실행하면 아래처럼 나온다.

[샘플소스 실행]