如何从 Chart.js 饼图中删除白色边框? [英] How can I remove the white border from Chart.js pie chart?
本文介绍了如何从 Chart.js 饼图中删除白色边框?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用 Chart.js 饼图,我想删除切片之间的白线.有人能告诉我怎么做吗?提前致谢
我在文档中没有看到任何内容.
<div id="canvas-holder"><canvas id="chart-area" width="250" height="250"/>
解决方案
UPDATE
对于较新版本的 Chart.js(即 2.2.2 及更高版本),请参阅@grebenyuksv 的回答.>
此答案是为旧版本的 Chart.js(即 1.0.2)添加的
<小时>原始答案
只需配置图表隐藏线的选项
segmentShowStroke: false
像这样:
//创建图表var ctx = document.getElementById("myChart").getContext("2d");变量数据 = [{价值:300,颜色:#F7464A",亮点:#FF5A5E",标签:红色"}, {价值:50,颜色:#46BFBD",亮点:#5AD3D1",标签:绿色"}, {值:100,颜色:#FDB45C",亮点:#FFC870",标签:黄色"}];变量选项 = {//Boolean - 我们是否应该在每个段上显示一个笔划//设置为 false 以隐藏段之间的空间/线段ShowStroke:假};//对于饼图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>
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
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>
解决方案
UPDATE
For newer versions of Chart.js (i.e. 2.2.2 and higher), see @grebenyuksv's answer.
This answer was added for an older version of Chart.js (i.e. 1.0.2)
Original answer
Just configure the options for the chart to hide the line
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>
这篇关于如何从 Chart.js 饼图中删除白色边框?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文