CSS 전용 원형 차트에서 조각 사이에 간격을 추가하는 방법은 무엇입니까?

CSS 전용 원형 차트 조각에 간격 추가: 실용적인 솔루션

CSS 전용 기술을 사용하여 렌더링된 원형 차트는 데이터 시각화를 위한 우아한 솔루션을 제공합니다. 그러나 조각 사이에 간격이 없으면 차트의 효율성이 떨어질 수 있습니다. 이 문제를 해결하고 제공된 이미지와 유사한 원형 차트를 만들려면 다음 단계를 따르십시오.

1단계: 불필요한 클립 경로 제거

원본 코드는 클립 경로를 광범위하게 활용합니다. 불필요한 복잡성. 대신 절대 위치 지정 및 테두리 반경을 중심으로 하는 단순화된 구조를 만듭니다.

2단계: 컨테이너 Div 만들기

다음을 사용하여 넘친 영역을 숨기고 모든 슬라이스를 중앙에 배치하는 컨테이너 div를 설정합니다. 오버플로: 숨김.

3단계: 절대 위치 지정 슬라이스

컨테이너 내에서 각 슬라이스를 절대적으로 확장하고 사용 가능한 전체 공간을 차지하도록 확장합니다. 테두리 반경을 활용하여 슬라이스가 원형으로 나타나는지 확인합니다.

4단계: 테두리 너비 및 색상 정의

각 슬라이스에 대해 테두리 속성을 사용하여 테두리 너비와 색상을 정의합니다. 사용자 정의 CSS 변수(예: --c)를 활용하여 테두리 색상 수정을 단순화합니다.

5단계: 조각 회전

각 조각에 변환: 회전()을 적용하여 올바르게 정렬합니다.

예제 코드

CSS 전용 원형 차트를 생성하려면 다음 코드를 구현하세요. 슬라이스 사이의 간격 포함:

.palette {
  height: 200px;
  width: 200px;
  position: relative;
  overflow: hidden;
}

.palette > * {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 50px solid var(--c, red);
  border-radius: 50%;
  clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 33.745%);
}

.color1 {
  transform: rotate(72deg);
  --c: blue;
}

.color2 {
  transform: rotate(144deg);
  --c: orange;
}

.color3 {
  transform: rotate(-72deg);
  --c: green;
}

.color4 {
  transform: rotate(-144deg);
  --c: purple;
}

<div class="palette">
  <div class="color1"></div>
  <div class="color2"></div>
  <div class="color3"></div>
  <div class="color4"></div>
</div>

이제 이 코드를 사용하면 슬라이스 사이의 간격이 명확한 시각적으로 매력적인 CSS 전용 원형 차트를 만들 수 있습니다.

위 내용은 CSS 전용 원형 차트에서 조각 사이에 간격을 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!