web-dev-qa-db-ja.com

Chart.js円グラフから白い境界線を削除するにはどうすればよいですか？

Chart.js円グラフを使用していますが、スライス間の白い線を削除したいです。誰かがこれを行う方法を教えてもらえますか？前もって感謝します

私は文書に何も見ませんでした。

enter image description here

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

[〜＃〜] update [〜＃〜]

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>
9
blurfus

[email protected]（[email protected]のテストは行っていない）：

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

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>
4
Wariored
Chart.defaults.global.elements.arc.borderWidth = 0;

JavaScriptコードの先頭に配置します。

2
Serhii Nuzhnyi
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]
            }
        ]
2
Robert