Chart.js piechart、弧の外側にのみボーダーを持っています

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>