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

Question

我正在使用Chart.js饼图，想要去除切片之间的白线。能否告诉我如何做到这一点？先感谢您。我在文档中没有看到任何相关内容。

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

- Ris

---

如果您将其配置为使用此选项 segmentShowStroke: false，会发生什么？ - blurfus

http://www.chartjs.org/docs/#doughnut-pie-chart-chart-options 中的正确答案是 segmentShowStroke。 - xkcd149

@ochi，这个方法有效！非常简单的修复...谢谢... - Ris

我很高兴它能够正常工作 :) - blurfus

Answer 1

在chart.js@2.2.2版本中（未测试chart.js@2.x.x版本）：

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

- grebenyuksv

---

这应该是当前版本Chartjs的被接受答案。 - Pierrick Bignet

当使用默认颜色时，这对我有效。如果您定义了自定义颜色，则边框会重新出现。要删除它们，您必须添加选项segmentShowStroke：false。 - Ole_S

仅供大家参考，适用于2.7.3版本。 - whatamidoingwithmylife

有没有任何想法可以去掉条形图的白色边框？我使用了同样的方法，但它不起作用。 - Marcello Silva

Answer 2

更新

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

此答案适用于较旧版本的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>

- blurfus

---

@Sudhanshusharma请详细说明您的评论...在我的Win 7 / Chrome和Win7 / Firefox上可以正常工作。 - blurfus

也许我有最新版本的chart.js。对我来说，得票最多的答案有效。 - Sudhanshu sharma

@Sudhanshusharma，可能是这个原因...但是以后请注意：不要篡改我的答案——编辑是可以的，但完全重写是绝对不行的。如果你不同意别人的答案，请自己写一个答案，而不是完全改变它。 - blurfus

@Sudhanshusharma 那又怎样？ 我的答案是在六个月之前写下的，比目前投票最高的答案早。在当时，当前版本没有解决方案，并且使用了由OP接受的版本。确实需要进一步澄清（我已经添加了），但这并不意味着我的回答是不正确的或需要被贬低。 - blurfus

我该如何在甜甜圈图表中实现这个？ - Ashutosh Shrestha

Answer 3

最新的Chartjs（如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>

- Wariored

---

borderWidth: 0, //这将隐藏边框 解决了我的问题 - Therichpost

Answer 4

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

将其放置在您的javascript代码开头。

- Serhii Nuzhnyi

Answer 5

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]
            }
        ]

- Robert

---

在留下答案时，你需要留下不仅仅是代码块。你应该解释这个代码块正在做什么。另外，由于这似乎是代码，因此应该放在代码块中。 - Mike