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

How can I remove the white border from Chart.js pie chart?

提问by Ris

I am using Chart.js pie chart and I'd like to remove white lines between slices. Could someone tell me way to do this ? Thanks in advance

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

I didn't see anything in the documenation.

我在文档中没有看到任何内容。

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

采纳答案by blurfus

UPDATE

更新

For newer versions of Chart.js (i.e. 2.2.2 and higher), see @grebenyuksv's answer.

对于较新版本的 Chart.js（即 2.2.2 及更高版本），请参阅@grebenyuksv 的回答。

This answer was added for an older version of Chart.js (i.e. 1.0.2)

此答案是为旧版本的 Chart.js（即 1.0.2）添加的

---

---

Original answer

原答案

Just configure the options for the chart to hide the line

只需配置图表选项以隐藏线条

segmentShowStroke: false

segmentShowStroke: false

Something like this:

像这样的东西：

//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>

回答by grebenyuksv

In [email protected] (haven't tested for [email protected]):

在[email protected]（还没有测试[email protected]）：

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

回答by Wariored

For newest Chartjs like 2.7.2 just put: borderWidth: 0in the data

对于像 2.7.2 这样的最新 Chartjs，只需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>

回答by Serhii Nuzhnyi

Chart.defaults.global.elements.arc.borderWidth = 0;

Place it at the beginning of your javascript code.

将它放在 javascript 代码的开头。

回答by Robert

datasets: [
            {
                label: "TeamB Score",
                data: [20, 35, 40, 60, 50],
                backgroundColor: [
                    "#FAEBD7",
                    "#DCDCDC",
                    "#E9967A",
                    "#F5DEB3",
                    "#9ACD32"
                ],
                borderColor: [
                    "#E9DAC6",
                    "#CBCBCB",
                    "#D88569",
                    "#E4CDA2",
                    "#89BC21"
                ],
                borderWidth: [1, 1, 1, 1, 1]
            }
        ]