ChartJS – 有没有办法去除饼图周围的空白?

2022-01-22 00:00:00 space javascript chart.js margin

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


<canvas id="chart-gender"></canvas></div><脚本>var 性别数据 = [10, 35];var graph_gender_preset = {标签:[女性"，男性"]，数据集:[{数据:性别数据，背景颜色:[#0fa0e3"，#ff3549"]}]};var ctx3 = $("#chart-gender");var chart_gender = new Chart(ctx3, {类型:'甜甜圈'，数据:graph_gender_preset，选项: {响应式:真实，标题: {显示:假，位置:顶部"，字体样式:粗体"，字体大小:0，全宽:假，填充:0},传奇: {显示:假，位置:顶部"，全宽:假，标签:{显示:假，usePointStyle:真，字体大小:15，字体样式:粗体"}}}});</脚本>

解决方案

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

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

这是一个 JS Fiddle 示例.



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.

Edit:
<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.

Here is an 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>


	
		相关文章