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: '$000000',
                        text: '$40,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>

适用于该HTML的适用CSS

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%;
}

任何人都可以帮我弄清楚如何摆脱那些巨大的利润并完成我所描述/展示的外观吗？有可能吗？

Answer 1

我误解了你的问题，我认为你需要谷歌排行榜。无论如何，图表js有潜在的解决方案。您需要添加width和height属性。例如：

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

这是指向JsFiddle的链接，其中包含您的代码+第一个图表的更新width和height属性（第二个图表用于比较相同）： https://jsfiddle.net/cncdf4od/2/

Answer 2

我发现其中一个问题实际上是一个简单的解决方案 AspectRatio：图表选项中的1

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

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

2 个答案: