我正在使用Chart.js饼图,我想删除切片之间的白线。有人能告诉我这样做吗?提前致谢
我在文档中没有看到任何内容。
<div class="pie-chart">
<div id="canvas-holder">
<canvas id="chart-area" width="250" height="250"/>
</div>
</div>
答案 0 :(得分:68)
在chart.js@2.2.2(尚未测试chart.js@2.x.x):
const options = {
elements: {
arc: {
borderWidth: 0
}
}
};
答案 1 :(得分:8)
<强>更新强>
对于较新版本的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);
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<canvas id="myChart" width="200" height="200"></canvas>
&#13;
答案 2 :(得分:2)
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]
}
]
答案 3 :(得分:2)
Chart.defaults.global.elements.arc.borderWidth = 0;
将其放在您的JavaScript代码的开头。
答案 4 :(得分:2)
对于最新的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>