ChartJS——有什么方法可以去除饼图周围的空白区域吗？

Question

我正在处理一个图表，该图表在左侧和右侧有不需要的间距。我一直试图在没有运气的情况下删除它，我不知道现在还能做什么。我已经仔细阅读了文档，但似乎找不到解决方案。这可能吗？让我知道是否需要更多信息，我会提供。

编辑：

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

Answer 1

问题不在于甜甜圈，而是使用它的画布。

甜甜圈必须使用二次方框，否则看起来像省略号。因此，如果您更改画布的大小并使其成为二次方，您将不再有任何边框。

这是一个JS Fiddle 例子.

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

Answer 2

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

改变图表的纵横比

options: { aspectRatio: 1 }

根据文档 here 默认设置为 2。如果将其更改为 1，则图表画布将是方形的，并且甜甜圈/饼图周围不会有所有空白。

希望这对某人有帮助！

Answer 3

经过大量研究，我发现设置宽度和高度会消除该空间。

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

Answer 4

您必须为图表设置选项

JS :

options = { aspectRatio: 1 }

HTML :

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

Answer 5

我使用了“react-minimal-pie-chart”npm，应该删除圆形属性以删除饼图周围的空间。

<PieChart
  animate
  animationDuration={40}
  animationEasing="ease-in"
  data={data1}
  lineWidth={20}
  lengthAngle={360}
  paddingAngle={0}
  radius={30}
  // rounded
  startAngle={175}
  endAngle={150}
/>;

Answer 6

我觉得responsive需要设置为false，那么height和width属性是这样的：

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