CircleGauge

CircleGauge

Constructor

CircleGauge(options)

CircleGauge 객체를 생성한다.

var options = {
  lineWidth: 10,
  percentage: 70,
  radius: 50,
  lineColor: '#d500f9',
  text: function(value) {
    return (parseFloat(value) | 0)  + "%";
}
var circularBar = new CircleGauge(options);

Parameters

• options _^Object
  • bgColor _{^String : 배경색}
  • lineColor _{^String : 퍼센티지 라인색}
  • lineWidth _{^Number : 퍼센티지 라인 굵기}
  • radius _{^Number : 반경}
  • value _{^Number : 퍼센티지 초기값}
  • textColor _{^String : 내부 텍스트 값}
  • textSize _{^Number : 내부 텍스트 크기}
  • showText _{^Boolean : 내부 텍스트 표시여부}
  • emptyLineWidth _{^Number : 빈공간 라인 굵기}
  • emptyLineColor _{^String : 빈공간 라인 색}
  • 'text' _{^Function : text 값을 정하는 function, value 변화시마다 호출}

Returns

• CurcularBar _^Object

---

Methods

create(target)

타겟 컨테이너 안에 CircularBar를 생성한다.

var target = document.getElementById('targetID');
var options = {
  lineWidth: 10,
  percentage: 70,
  radius: 50,
  lineColor: '#d500f9'
}
var circleGauge = new CircleGauge(optios).create(target);

Parameters

• target _{^Node : CircleGauge를 생성할 타깃}

Returns

• CircleGauge _^Object

val()

현재 퍼센티지 값을 반환한다.

circleGauge.val();

Returns

• value _{^Number : 현재 설정된 퍼센티지 값}

val(value)

현재 퍼센티지 값을 설정한다.(애니메이션 없음)

circleGauge.val(20);

Parameters

• value _{^Number : 설정할 퍼센티지 값}

Returns

• value _{^Number : 현재 설정된 퍼센티지 값}

val(value, animation, mseconds, cb)

현재 퍼센티지 값을 설정한다.(애니메이션 있음)

circleGauge.val(20, true, 100);

Parameters

• value _{^Number : 설정할 퍼센티지 값}
• animation _{^Boolean : 애니메이션 여부}
• mseconds _{^Number : 애니메이션을 실행할 시간(millisecond)}
• cb _{^Function : 애니메이션이 끝났을 때 호출되는 콜백(millisecond)}

Returns

• value _{^Number : 현재 설정된 퍼센티지 값}

text()

현재 내부 텍스트 값을 반환한다.

circleGauge.text();

Returns

• text _{^String : 설정된 내부 텍스트값}

text(str)

현재 내부 텍스트 값을 설정한다.

circleGauge.text(circleGauge.val() + "%");

Parameters

• str _{^String : 설정할 내부 텍스트값}

Returns

• text _{^String : 설정된 내부 텍스트값}

textColor()

현재 내부 텍스트 색을 반환한다.

circleGauge.textColor();

Returns

• color _{^String : 설정된 내부 텍스트 색}

textColor(color)

현재 내부 텍스트 색을 설정한다.

circleGauge.textColor('#ff0000');

Parameters

• color _{^String : 설정할 내부 텍스트 색}

Returns

• color _{^String : 설정된 내부 텍스트 색}

textSize()

현재 내부 텍스트 크기를 반환한다.

circleGauge.textSize();

Returns

• size _{^Number : 설정된 내부 텍스트 크기값}

textSize(size)

현재 내부 텍스트 크기를 설정한다.

circleGauge.textSize(20);

Parameters

• size _{^Number : 설정할 내부 텍스트 크기값}

Returns

• size _{^Number : 설정된 내부 텍스트 크기값}

lineWidth()

퍼센티지를 나타내는 선의 굵기를 반환한다.

circleGauge.lineWidth();

Returns

• width _{^Number : 설정된 퍼센티지 공간 굵기 값}

lineWidth(width)

퍼센티지를 나타내는 선의 굵기를 설정한다.

circleGauge.lineWidth(20);

Parameters

• width _{^Number : 설정할 퍼센티지 공간 굵기 값}

Returns

• width _{^Number : 설정된 퍼센티지 공간 굵기 값}

lineColor()

퍼센티지를 나타내는 선의 색상을 반환한다.

circleGauge.lineColor();

Returns

• color _{^String : 설정된 퍼센티지 공간 색상 값}

lineColor(color)

퍼센티지를 나타내는 선의 색상을 설정한다.

circleGauge.lineColor('#ff0000');

Parameters

• color _{^String : 설정할 퍼센티지 공간 색상 값}

Returns

• color _{^String : 설정된 퍼센티지 공간 색상 값}

emptyLineWidth()

퍼센티지의 나머지 부분의 굵기를 반환한다.

circleGauge.emptyLineWidth();

Returns

• width _{^Number : 설정된 빈 공간 굵기 값}

emptyLineWidth(width)

퍼센티지의 나머지 부분의 굵기를 설정한다.

circleGauge.emptyLineWidth(20);

Parameters

• width _{^Number : 설정할 빈 공간 굵기 값}

Returns

• width _{^Number : 설정된 빈 공간 굵기 값}

emptyLineColor()

퍼센티지의 나머지 부분의 굵기를 반환한다..

circleGauge.emptyLineColor();

Returns

• color _{^String : 설정된 빈 공간 색상 값}

emptyLineColor(color)

퍼센티지의 나머지 부분의 색상을 설정한다.

circleGauge.emptyLineColor('#ff0000');

Parameters

• color _{^String : 설정할 빈 공간 색상 값}

Returns

• color _{^String : 설정된 빈 공간 색상 값}

bgColor()

현재 내부 텍스트 색을 반환한다.

circleGauge.bgColor();

Returns

• color _{^String : 설정된 배경 색상 값}

bgColor(color)

현재 내부 텍스트 색을 설정한다.

circleGauge.bgColor('#ff0000');

Parameters

• color _{^String : 설정할 내부 텍스트 색상 값}

Returns

• color _{^String : 설정된 내부 텍스트 색상 값}

radius()

반경 값을 반환한다.

circleGauge.radius();

Returns

• radius _{^Number : 설정된 반지름 값}

radius(rad)

반경 값을 설정, 반환한다.

circleGauge.radius(10);

Parameters

• rad _{^Number : 설정할 반지름 값}

Returns

• radius _{^Number : 설정된 반지름 값}