둥근 두 톤 도넛 형 차트를 만드는 방법은 무엇입니까?

Question

나는 내가 어떻게 사람들을 얻는 단서도 없어 AngularJS와, SVG와

D3.js

를 사용하여 수 있습니다

아래처럼 보이는 도넛 차트를 만들려고 해요 반올림, 제발 도와주세요. 감사.

Answer 1

간단한 대답 : 당신은 가면을 사용합니다.

마스크를 사용하여 베젤의 안쪽 부분을 그립니다. 그리고 중간에 구멍을 자르는 마스크.

홀 마스크는 실제로 필요하지 않습니다. 두꺼운 선으로 도넛을 만들 수 있습니다. 그러나 원형 섹터를 그리는 것이 더 쉬워 보였습니다. 그런 다음 구멍을 만드십시오.

여기는 SVG 형식입니다. 전환을 D3에 맡깁니다.

<svg width="600" height="600"> 
 
    <defs> 
 
     <!-- masks out the area outside and inside the inner bevel region --> 
 
     <mask id="innerbevel"> 
 
      <rect width="100%" height="100%" fill="black"/> 
 
      <circle cx="0" cy="0" r="235" fill="white"/> 
 
     </mask> 
 
     <!-- cuts hole in centre of graph --> 
 
     <mask id="centrehole"> 
 
      <rect x="-100%" y="-100%" width="200%" height="200%" fill="white"/> 
 
      <circle cx="0" cy="0" r="195" fill="black"/> 
 
     </mask> 
 
    </defs> 
 

 
    <!-- Graph is drawn centred at (0,0). The transform moves it into middle of SVG. --> 
 
    <!-- The mask forms the hole in the centre. --> 
 
    <g transform="translate(300,300)" mask="url(#centrehole)"> 
 
     <!-- outer bevel --> 
 
     <g> 
 
      <!-- light blue segment --> 
 
      <path d="M0 0 0 -275 A 275 275 0 0 1 0 275" fill="#89e4d2"/> 
 
      <!-- red segment --> 
 
      <path d="M0 0 0 275 A 275 275 0 0 1 -275 0" fill="#f394a2"/> 
 
      <!-- blue segment --> 
 
      <path d="M0 0 -275 0 A 275 275 0 0 1 0 -275" fill="#a3a4ff"/> 
 

 
      <!-- light blue rounded end --> 
 
      <circle cx="0" cy="235" r="40" fill="#89e4d2"/> 
 
      <!-- red rounded end --> 
 
      <circle cx="-235" cy="0" r="40" fill="#f394a2"/> 
 
      <!-- blue rounded end --> 
 
      <circle cx="0" cy="-235" r="40" fill="#a3a4ff"/> 
 
     </g> 
 
     <!-- inner bevel - same as above but with different colours and is masked --> 
 
     <g mask="url(#innerbevel)"> 
 
      <!-- light blue segment --> 
 
      <path d="M0 0 0 -275 A 275 275 0 0 1 0 275" fill="#5bc8b7"/> 
 
      <!-- red segment --> 
 
      <path d="M0 0 0 275 A 275 275 0 0 1 -275 0" fill="#ef6974"/> 
 
      <!-- blue segment --> 
 
      <path d="M0 0 -275 0 A 275 275 0 0 1 0 -275" fill="#6b5dff"/> 
 

 
      <!-- light blue rounded end --> 
 
      <circle cx="0" cy="235" r="40" fill="#5bc8b7"/> 
 
      <!-- red rounded end --> 
 
      <circle cx="-235" cy="0" r="40" fill="#ef6974"/> 
 
      <!-- blue rounded end --> 
 
      <circle cx="0" cy="-235" r="40" fill="#6b5dff"/> 
 
     </g> 
 
    </g> 
 

 
</svg>