我正在处理一个左右两侧都有多余间距的图表。我一直在尝试删除它,但没有成功,我不知道现在还能做什么。我已经彻底阅读了文档,但似乎找不到解决方案。这可能吗?如果需要更多信息,请告诉我,我会提供它。
编辑:
<div>
<canvas id="chart-gender"></canvas>
</div>
<script>
var gender_data = [10, 35];
var graph_gender_preset = {
labels: ["Female", "Male"],
datasets: [
{
data: gender_data,
backgroundColor: ["#0fa0e3", "#ff3549"]
}
]
};
var ctx3 = $("#chart-gender");
var chart_gender = new Chart(ctx3, {
type: 'doughnut',
data: graph_gender_preset,
options: {
responsive: true,
title: {
display: false,
position: "top",
fontStyle: "bold",
fontSize: 0,
fullWidth: false,
padding: 0
},
legend: {
display: false,
position: "top",
fullWidth: false,
labels: { display: false, usePointStyle: true, fontSize: 15, fontStyle: "bold" }
}
}
});
</script>
6条答案
按热度按时间dxxyhpgq1#
问题不在于甜甜圈,而在于使用甜甜圈的画布。
甜甜圈必须使用一个二次框,否则它看起来像一个省略号。所以如果你改变画布的大小,使它成为二次,你就不会有任何边界了。
这是一个JS Fiddle example。
ikfrs5lh2#
我最近也遇到了同样的问题。我的解决方法是用
根据文档here,默认值设置为2。如果将其更改为1,图表画布将是方形的,甜甜圈/饼周围不会有那么多空白。
希望这对某人有帮助!
vddsk6oq3#
经过大量的研究,我发现设置宽度和高度将删除该空间。
1l5u6lss4#
您必须为图表设置选项
联森:
超文本:
hgc7kmma5#
我认为responsive需要设置为false,那么height和width属性的工作方式如下:
bkkx9g8r6#
我使用了“react-minimal-pie-chart”npm,应该删除圆形属性以删除饼图周围的空间。
〈PieChart动画持续时间={40}动画缓动=“缓入”数据={data 1}线宽={20}长度Angular ={360}填充Angular ={0}半径={30} //圆形起始Angular ={175}结束Angular ={150}/〉请查找下面随附的快照。