javascript - Chart.js v2，从雷达图中删除填充/边距

Question

有人遇到过从 chartjs 图表中删除填充(或边距？)的问题吗？

下面是我的代码(在 jsFiddle 中)...和图像(注意底部？丑陋的酱汁)。

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

Answer 1

您可以使用 beforeFit 和 afterFit 处理程序围绕 fit 方法包装一些逻辑，以在标签数量增加时更正此填充。是 3(fit 函数首先假设最大半径为图表高度的一半。对于三 Angular 形，我们实际上有更多的空间)

我们所做的就是缩放 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 = 从三 Angular 形中心到 Angular 的距离
2. 三 Angular 形的总高度= h + 三 Angular 形中心到边的距离 = h + h * sin 30 = 1.5 小时
3. 当前 h = 图表高度/2

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

   1.5 * 图表高度/2 * r = 图表高度

5. 这给了我们

   r = 2/1.5

<小时/>

fiddle - https://jsfiddle.net/zqp525gf/