게이지 스타일링 & CSS

많은 게이지 컨트롤과 달리, Wijmo 게이지는 외부 색상과 마크업 요소가 거의 없이 표시되는 데이터에 집중합니다. 특히 작은 화면 장치에서 사용하고 읽기 쉽도록 디자인 되었습니다.

게이지 컨트롤의 모양은 주로 CSS에 정의됩니다. 이를 사용자 정의하려면, 기본 테마에서 새 CSS 파일로 CSS 규칙을 복사하고 필요에 따라 수정합니다.

.wj-gauge {
  width: 70%;
  margin: 20px auto;
}
.wj-gauge .wj-ticks {
  stroke: f0f0f0;
  stroke-width: 2px;
}
.wj-gauge .wj-face path {
  fill: #f0f0f0;
  stroke: #e0e0e0;
}
.wj-gauge.wj-state-focused circle.wj-pointer {
  stroke-width: 8px;
  stroke: currentColor;
}

게이지 Hover 스타일링

표준 ":hover" 동적 의사 클래스(pseudo-class)를 사용하여 마우스가 게이지 위로 이동할 때 게이지에 특수 효과를 추가할 수 있습니다.

.wj-gauge:hover .wj-pointer {
  fill: orange;
  stroke: orange;
  stroke-width: 4px;
  transition: fill stroke stroke-width .3s;
}

게이지 포커스 스타일링

"wj-state-focused" 동적 의사 클래스(pseudo-class)를 사용하여 게이지에 포커스가 포함되었을 때 게이지에 특수 효과를 추가할 수 있습니다.

.wj-gauge.wj-state-focused .wj-pointer {
  fill: red;
}
.wj-gauge.wj-state-focused circle.wj-pointer {
  stroke-width: 4px;
  stroke: red;
}

범위 스타일링

범위의 색상과 위치는 주로 'showRanges' 과 'ranges' 속성의 값으로 정의됩니다. 그러나 범위의 전체 스타일 속성을 컨트롤하여 hover 스타일을 적용할 수도 있습니다.

.wj-gauge .wj-ranges {
  opacity: .25;
}
.wj-gauge:hover .wj-ranges {
  opacity: 1;
  transition: opacity 600ms;
}

눈금 스타일링

눈금 색상을 설정하는 것 외에도, CSS로 눈금의 너비(또는 두께)를 컨트롤 할 수 있습니다.

.wj-gauge .wj-ticks {
  stroke: white;
  stroke-width: 2px;
}