javascript - ChartJS——有没有办法去除饼图周围的空白区域?

标签 javascript margin chart.js space

Pie chart

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

编辑:

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

最佳答案

问题不在于 donut ,而在于使用它的 Canvas 。

donut 必须使用二次方框,否则看起来像省略号。因此,如果您更改 Canvas 的大小并将其设为二次方,您将不再有任何边框。

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

关于javascript - ChartJS——有没有办法去除饼图周围的空白区域?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41546993/

相关文章:

css - 让一个 div 保持在我页面上所有其他 div 的下方

html - 使用 css 水平间隔我的复选框?

javascript - 无法让轴标签显示在 Chart.js 中

html - 将按钮放在我的页面中

javascript - 将鼠标悬停在 chartjs 饼图上时 Canvas 填充文本消失

javascript - Chart.js 2 - 始终在气泡图中仅显示一些工具提示

javascript - 如何在不打开 Javascript 窗口的情况下发送 HTTP 请求?

javascript - 如何检查多个数组上的键值对并使用 javascript 进行过滤?

JavaScript - 获取类名

javascript - 从同一 ID 名称分配和获取值