ChartJS -有什么方法可以去除饼图周围的空白吗?

d8tt03nd  于 2023-03-18  发布在  Chart.js
关注(0)|答案(6)|浏览(222)

我正在处理一个左右两侧都有多余间距的图表。我一直在尝试删除它,但没有成功,我不知道现在还能做什么。我已经彻底阅读了文档,但似乎找不到解决方案。这可能吗?如果需要更多信息,请告诉我,我会提供它。
编辑:

<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>
dxxyhpgq

dxxyhpgq1#

问题不在于甜甜圈,而在于使用甜甜圈的画布。
甜甜圈必须使用一个二次框,否则它看起来像一个省略号。所以如果你改变画布的大小,使它成为二次,你就不会有任何边界了。
这是一个JS Fiddle example

<table border="1">
  <tr>
    <td>
      First
    </td>
    <td>
      <canvas width="100%" height="100%" id="myChart"></canvas>
    </td>
    <td>
      Third
    </td>
  </tr>
</table>
ikfrs5lh

ikfrs5lh2#

我最近也遇到了同样的问题。我的解决方法是用

options: { aspectRatio: 1 }

根据文档here,默认值设置为2。如果将其更改为1,图表画布将是方形的,甜甜圈/饼周围不会有那么多空白。
希望这对某人有帮助!

vddsk6oq

vddsk6oq3#

经过大量的研究,我发现设置宽度和高度将删除该空间。

<div>
<canvas id="chart-gender" width="300" height="300"></canvas>  
</div>
1l5u6lss

1l5u6lss4#

您必须为图表设置选项
联森:

options = { aspectRatio: 1 }

超文本:

<canvas baseChart [options]="options"></canvas>
hgc7kmma

hgc7kmma5#

我认为responsive需要设置为false,那么height和width属性的工作方式如下:

const options= {
 responsive: false
} 
<div>
  <canvas id="chart-gender" width="300" options={options} height="300"></canvas>  
</div>
bkkx9g8r

bkkx9g8r6#

我使用了“react-minimal-pie-chart”npm,应该删除圆形属性以删除饼图周围的空间。
〈PieChart动画持续时间={40}动画缓动=“缓入”数据={data 1}线宽={20}长度Angular ={360}填充Angular ={0}半径={30} //圆形起始Angular ={175}结束Angular ={150}/〉请查找下面随附的快照。

相关问题