Chart.js v2，从雷达图表中移除填充/边距

Question

有没有人遇到从chartjs图表中删除填充（或边距？）的问题？

下面是我的代码（在jsFiddle中）...和图像（注意底部？UGLY酱）。

这是一个突出问题的JSFiddle。请注意白框底部的填充。 https://jsfiddle.net/mre1p46x/

Answer 1

当标签数量为3（fit时，您可以使用beforeFit和afterFit处理程序围绕fit方法包含一些逻辑来纠正此填充函数从假设最大半径为图表高度的一半开始。对于三角形，我们实际上有更多的空间）

我们所做的就是缩放height属性来补偿这个假设，就像这样

...
options: {
    scale: {
        beforeFit: function (scale) {
            if (scale.chart.config.data.labels.length === 3) {
                var pointLabelFontSize = Chart.helpers.getValueOrDefault(scale.options.pointLabels.fontSize, Chart.defaults.global.defaultFontSize);
                scale.height *= (2 / 1.5)
                scale.height -= pointLabelFontSize;
            }
        },
        afterFit: function (scale) {
            if (scale.chart.config.data.labels.length === 3) {
                var pointLabelFontSize = Chart.helpers.getValueOrDefault(scale.options.pointLabels.fontSize, Chart.defaults.global.defaultFontSize);
                scale.height += pointLabelFontSize;
                scale.height /= (2 / 1.5);
            }
        },
            ...

缩放因子2 / 1.5很容易理解

1. 使用h = distance from center of triangle to a corner
2. 三角形的总高度= h + distance from center of triangle to a side = h + h * sin 30 = 1.5 h
3. h目前= chart height / 2

4. 我们想用r来缩放它，这样

   1.5 * chart height / 2 * r = chart height

5. 这给了我们

   r = 2 / 1.5

小提琴 - https://jsfiddle.net/zqp525gf/