ChartJS – 有没有办法去除饼图周围的空白？答案

【问题标题】：ChartJS – is there any way to remove blank space around pie charts?ChartJS – 有没有办法去除饼图周围的空白？
【发布时间】：2017-05-23 15:41:12
【问题描述】：

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

编辑：

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

【问题讨论】：

我尝试调整 html 元素本身的宽度，并尝试为默认占用该空间的图表元素（例如图例元素）切换各种宽度和可见性设置。跨度>
好的。根据记忆，使用了canvas 元素，对吗？如果是这样，我会尝试调整画布的宽度等。画布是否直接在元素 ```
正确。我试过改变画布元素的大小。这不是问题。整个画布变小了，但我不希望它变小，我只是希望周围的间距消失。我检查了元素，但没有帮助。
没人知道吗？我还在为此苦苦挣扎。
没有在开发工具中检查它，我已经建议了一点帮助。饼图周围的整个空白区域是画布，还是画布两侧都有较大的边距？

标签： javascript margin chart.js space

【解决方案1】：

您必须为图表设置选项

JS：

options = { aspectRatio: 1 }

HTML：

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

【讨论】：

【解决方案2】：

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

更改图表的纵横比

options: { aspectRatio: 1 }

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

希望这对某人有所帮助！

【讨论】：

完美！非常感谢你找到这个！我使用了一些提到的解决方法，但它让图表看起来有点模糊。这样我们就不必牺牲响应性或任何东西。再次感谢！！
天哪，我一直在寻找为什么我的图表这么长时间保持如此之小，这终于解决了它。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

谢谢！我只做了没用，但忘了这个。
嗯...什么？你能详细说明一下吗？我在看你的小提琴，但我仍然不明白它是如何工作的，为什么它对我不起作用。 “让它成为二次方”是什么意思。
问题是，你的甜甜圈边界框的大小是怎么计算的？ chartJS 通过获取传入的高度来声明宽度。但是，如果边界框的宽度更大，您将在边界框内的左侧和/或右侧获得空白空间。如果您为边界框显式定义较小的宽度，则同样适用。然后，chartJS 仅采用与宽度相同的值作为高度，从而导致顶部和/或底部的空白。所以边界框必须具有相同的宽度和高度值，也就是说，它是二次方的。