Chart.js 원형 차트에만 외곽에 테두리가 있습니다.

Question

저는 chart.js로 만든 파이 차트가 있습니다. 현재는 원/호의 바깥쪽에 테두리가있을 수 있는지 궁금합니다. :

나는 다음과 같은 구성을 시도하지만 전체 세그먼트에 국경을 적용합니다.

 options: { 
      elements: { 
       arc: { 
        borderWidth: 0 
       } 
      } 
     } 

도 :

data: { 
     datasets: [{ 
      data: [male_data , female_data], 
      backgroundColor: pieColors1, 
      borderWidth: [10, 0, 0, 0, 0] 
     }] 
    }, 

을하지만 메신저 점점 것입니다 :

Answer 1

난 당신이 흰색 스트립 자신의 컬러 이미지 (단색을 만들어야 할 것 같아요 top) 캔버스 이미지로 전달합니다.

다음은 chart.js 문서에서 제공된 샘플과 그물에서 발견 된 임의의 그림을 기반으로 한 수정 된 예입니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0/Chart.js"></script> 
 
\t \t \t <canvas id="myChart" width="400" height="400"></canvas> 
 
     
 
     
 
<script> 
 
var img = new Image(); 
 
img.src = 'http://www.worktop-express.co.uk/media/gbu0/metro-tiles-white-sparkle-worktops-100717.jpg'; 
 
img.onload = function() { 
 
\t var ctx = document.getElementById("myChart").getContext('2d'); 
 
\t var fillPattern = ctx.createPattern(img, 'repeat'); 
 
\t var myChart = new Chart(ctx, { 
 
    type: 'pie', 
 
    data: { 
 
     labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
 
     datasets: [{ 
 
      label: '# of Votes', 
 
      data: [12, 19, 3, 5, 2, 3], 
 
      backgroundColor: [ 
 
       'rgba(255, 99, 132, 10)', 
 
       'rgba(54, 162, 235, 0.2)', 
 
       'rgba(255, 206, 86, 0.2)', 
 
       'rgba(75, 192, 192, 0.2)', 
 
       'rgba(153, 102, 255, 0.2)', 
 
       fillPattern 
 
      ], 
 
      borderColor: [ 
 
       'rgba(0,0,0,100)', 
 
       'rgba(0,0,0,100)', 
 
       'rgba(0,0,0,100)', 
 
       'rgba(0,0,0,100)', 
 
       'rgba(0,0,0,100)', 
 
       'rgba(0,0,0,100)' 
 
      ], 
 
      borderWidth: 0 
 
     }] 
 
    }, 
 
    options: { 
 
     scales: { 
 
      yAxes: [{ 
 
       ticks: { 
 
        beginAtZero:true 
 
       } 
 
      }] 
 
     } 
 
    } 
 
}); 
 
} 
 
</script>