如何摆脱 chart.js 圆环图中较大的左右边距？

Question

我在使用 Chart.js 创建的圆环图上遇到左右边距问题。更具体地说，似乎不可能减少圆环图上看似 25% 的边距。有谁知道我是如何做到这一点的，或者是否有可能？我一直在查看我能找到的所有 github 问题和文档，但似乎没有任何效果。

Github 我发现的问题：

目前我有这个

问题是侧面的边距很大，无论我调整什么属性都无法让它们消失

尺寸方面，我希望两个图表都占据蓝色容器宽度的 50% 和高度的 75%。我正在尝试对所有内容使用百分比，以便响应。如果我在 chart.js 配置中使用响应式属性，它会保持这些边距不变。最终，这就是我想要粗略地做的事情（在这个例子中所需的高度不准确）。

现在我正在生成这样的图表

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.bundle.min.js"></script>
<script>
window.onload = function() {

Chart.pluginService.register({
        afterUpdate: function (chart) {
            if (chart.config.options.elements.center) {
                var helpers = Chart.helpers;
                var centerConfig = chart.config.options.elements.center;
                var globalConfig = Chart.defaults.global;
                var ctx = chart.chart.ctx;

                var fontStyle = helpers.getValueOrDefault(centerConfig.fontStyle, globalConfig.defaultFontStyle);
                var fontFamily = helpers.getValueOrDefault(centerConfig.fontFamily, globalConfig.defaultFontFamily);

                if (centerConfig.fontSize)
                    var fontSize = centerConfig.fontSize;
                // figure out the best font size, if one is not specified
                else {
                    ctx.save();
                    var fontSize = helpers.getValueOrDefault(centerConfig.minFontSize, 1);
                    var maxFontSize = helpers.getValueOrDefault(centerConfig.maxFontSize, 256);
                    var maxText = helpers.getValueOrDefault(centerConfig.maxText, centerConfig.text);

                    do {
                        ctx.font = helpers.fontString(fontSize, fontStyle, fontFamily);
                        var textWidth = ctx.measureText(maxText).width;

                        // check if it fits, is within configured limits and that we are not simply toggling back and forth
                        if (textWidth < chart.innerRadius * 2 && fontSize < maxFontSize)
                            fontSize += 1;
                        else {
                            // reverse last step
                            fontSize -= 1;
                            break;
                        }
                    } while (true)
                    ctx.restore();
                }

                // save properties
                chart.center = {
                    font: helpers.fontString(fontSize, fontStyle, fontFamily),
                    fillStyle: helpers.getValueOrDefault(centerConfig.fontColor, globalConfig.defaultFontColor)
                };
            }
        },
        afterDraw: function (chart) {
            if (chart.center) {
                var centerConfig = chart.config.options.elements.center;
                var ctx = chart.chart.ctx;

                ctx.save();
                ctx.font = chart.center.font;
                ctx.fillStyle = chart.center.fillStyle;
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                var centerX = (chart.chartArea.left + chart.chartArea.right) / 2;
                var centerY = (chart.chartArea.top + chart.chartArea.bottom) / 2;
                ctx.fillText(centerConfig.text, centerX, centerY);
                ctx.restore();
            }
        },
})

        var config = {
            type: 'doughnut',
            data: {
                labels: [
                  "Savings",
                  "Checking"
                ],
                datasets: [{
                    data: [300, 50],
                    backgroundColor: [
                      "#FF6384",
                      "#36A2EB"
                    ],
                    hoverBackgroundColor: [
                      "#FF6384",
                      "#36A2EB"
                    ]
                }]
            },
            options: {
                responsive:false,
                maintainAspectRatio:false,
                title: {
                    fullWidth: false,
                    display: true,
                    text: 'Current Balance'
                },
                legend: {
                    position:'bottom',
                    labels: {
                        boxWidth:15
                    }
                },
                elements: {
                    center: {
                        // the longest text that could appear in the center
                        maxText: '[=11=]0000',
                        text: ',000',
                        fontColor: 'black',
                        fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
                        fontStyle: 'normal',
                        minFontSize: 1,
                        maxFontSize: 256,
                    }
                }
            }
        };


        var ctx = document.getElementById("myDoughnutChart").getContext("2d");
        var myDoughnutChart = new Chart(ctx, config);

        var ctx2 = document.getElementById("myDoughnutChart2").getContext("2d");
        var myDoughnutChart2 = new Chart(ctx2, config);
};
</script>

</head>

HTML 的部分看起来像这样

<div class="col left">
    <div class="section side-sm" style="background-color:blue;">
    </div>
    <div class="section side-sm" style="background-color:black;">
    </div>
    <div class="section side-lg">
        <div class="accountContainer" style="height:75%;overflow:hidden;">
            <canvas id="myDoughnutChart" style="background-color:white;"></canvas>
        </div>
        <div class="expenseContainer" style="height:75%;overflow:hidden;">
            <canvas id="myDoughnutChart2" style="background-color:white;"></canvas>
        </div>
    </div>
</div>

适用的 CSS HTML 看起来像这样

html, body {
    margin: 0;
    height: 100%;
    font-family: 'Roboto', sans-serif;
}
/* Start: Column-Specific */
.col {
    height:100%;
    float:left;
}

.left, .right {
    width:25%;
    height:97%;
    background-color:white;
}
/*Start: Section-Specific */
.section {
    width:100%;
    clear: both;
    margin:auto;
    border-radius: 10px;
    display:table;
}

.col.left>.section, .col.right>.section {
    width:97%;
}
.side-lg {
    height:40%;
    background-color:blue;
    margin-top:1%;
}

任何人都可以帮我弄清楚如何去掉那些大边距并完成我 described/shown 的外观吗？可能吗？

Answer 1

我误读了你的问题，我以为你需要 google 图表。无论如何，图表 js 有潜在的解决方案。您将需要添加 width 和 height 属性。例如：

<canvas id="myDoughnutChart" width="250%" height="310%"></canvas>

这是一个 link 到 JsFiddle 的代码 + 更新了第一个图表的 width 和 height 属性（第二个图表相同以供比较）： https://jsfiddle.net/cncdf4od/2/

Answer 2

实际上我在其中一个问题中找到了一个简单的解决方案 aspectRatio：图表选项中的 1

https://github.com/chartjs/Chart.js/issues/449

如何摆脱 chart.js 圆环图中较大的左右边距？

How to get rid of large left and right margins in chart.js donut chart?

javascript

css

charts

donut-chart

chart.js