저울 그래프 만들기(게이지 그래프)

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

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

 

HTML

                        <canvas id="canvas_gage"></canvas>
                        <br />
                        <div style="margin-left:120px"><span id="canvas_gage_txt">0</span>%</div>          

 

 

 

javascript

  var opts = {
                angle: 0, // The span of the gauge arc
                lineWidth: 0.4, // The line thickness
                radiusScale: 1, // Relative radius
                pointer: {
                    length: 0.6, // // Relative to gauge radius
                    strokeWidth: 0.035, // The thickness
                    color: '#000000' // Fill color
                },
                staticLabels: {
                    font: "10px sans-serif",  // Specifies font
                    fontSize: 20,
                    labels: [100],  // Print labels at these values
                    color: "#000000",  // Optional: Label text color
                    fractionDigits: 0  // Optional: Numerical precision. 0=round off.
                },
                renderTicks: {
                    divisions: 2,
                    divWidth: 1.1,
                    divLength: 0.5,
                    divColor: '#333333',
                    subDivisions:1,
                    subLength: 0.5,
                    subWidth: 0.6,
                    subColor: '#666666'
        },
                staticZones: [
                    { strokeStyle: "#C55A11", min: 0, max: max_cu }, // Red from 100 to 130
                ],
                limitMax: false,     // If false, max value increases automatically if value > maxValue
                limitMin: false,     // If true, the min value of the gauge will be fixed
                colorStart: '#C55A11',   // Colors
                colorStop: '#8FC0DA',    // just experiment with them
                strokeColor: '#E0E0E0',  // to see which ones work best for you
                generateGradient: true,
                
                highDpiSupport: true,     // High resolution support

            };

 

 

 

var target = document.getElementById('canvas_gage'); // your canvas element

gauge.maxValue = 200; // set max gauge value

gauge.setMinValue(0);  // Prefer setter over gauge.minValue = 0

gauge.animationSpeed = 32; // set animation speed (32 is default value)

gauge.set(cu_gage);

gauge.setTextField(document.getElementById("canvas_gage_txt"));