如何从Chart.js饼图中删除白色边框？

Question

我正在使用Chart.js饼图，我想删除切片之间的白线。有人能告诉我怎么做吗？提前感谢

我在文件里什么都没看到。

​

​

    <div class="pie-chart">
         <div id="canvas-holder">
              <canvas id="chart-area" width="250" height="250"/>
         </div>
    </div>

Answer 1

更新

有关较新版本的Chart.js (即2.2.2及更高版本)，请参见@grebenyuksv's answer。

这个答案是为较早版本的Chart.js (即1.0.2)添加的。

原始答案

只需为图表配置选项以隐藏行

segmentShowStroke: false

就像这样：

​

//create chart
var ctx = document.getElementById("myChart").getContext("2d");

var data = [{
  value: 300,
  color: "#F7464A",
  highlight: "#FF5A5E",
  label: "Red"
}, {
  value: 50,
  color: "#46BFBD",
  highlight: "#5AD3D1",
  label: "Green"
}, {
  value: 100,
  color: "#FDB45C",
  highlight: "#FFC870",
  label: "Yellow"
}];

var options = {
  //Boolean - Whether we should show a stroke on each segment
  // set to false to hide the space/line between segments
  segmentShowStroke: false
};

// For a pie chart
var myPieChart = new Chart(ctx).Pie(data, options);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<canvas id="myChart" width="200" height="200"></canvas>

​

Answer 2

在chart.js@2.2.2 (尚未测试chart.js@2.x.x)中：

const options = {
    elements: {
        arc: {
            borderWidth: 0
        }
    }
};

Answer 3

对于最新的图表(如2.7.2 )，只需将：borderWidth: 0放在数据中

​

var ctx = $('#progress-chart');
    	var data = {
		    datasets: [{
		        data: [25, 50, 25],
		        backgroundColor: ['red', 'green', 'blue'],
		        borderWidth: 0, //this will hide border
		    }],

		    // These labels appear in the legend and in the tooltips when hovering different arcs
		    labels: [
		        'Red',
		        'Green',
		        'Blue'
		 	]
		};
        var progressChart = new Chart(ctx,{
		    type: 'pie',
		    data: data,
		    options: Chart.defaults.pie
		});

<div>
  <canvas id="progress-chart" width="500" height="250">   </canvas>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js">
    </script>

​