ChartJS –是否可以删除饼图周围的空白? [英] ChartJS – is there any way to remove blank space around pie charts?

问题描述

我正在处理一个图表，该图表左右两侧有多余的间距.我一直在尝试删除它，但是没有运气，而且我现在不知道该怎么办.我已经仔细阅读了文档，但似乎找不到解决方案.这可能吗?让我知道是否需要更多信息，我会提供.

I am dealing with a chart that has unwanted spacing on left and right side. I've been trying to remove it with no luck, and I don't know what else to do now. I've read the documentation thoroughly, but can't seem to find a solution. Is this possible to do? Let me know if more info is necessary, and I'll supply it.

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

推荐答案

问题不是甜甜圈，而是使用它的画布.

The problem is not the doughnut, it is the canvas in which it is used.

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

The doughnut has to use a quadratic box, otherwise it would look like an ellipsis. So if you change the size of the canvas and make it quadratic you won't have any borders anymore.

这是一个 JS小提琴示例.

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

这篇关于ChartJS –是否可以删除饼图周围的空白?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！