Chart.js2雷达，如何配置标签填充/间距？

Question

我有以下使用Chart.js v2的雷达图表。

​

​

我的配置：

legend: false,
scale: {
    pointLabels :{
        fontSize: 16,
        fontStyle: "bold",
    }
}

这里的问题是"Communication“标签在标签和数字100之间有0填充。如何配置此填充和/或修复此问题？

Answer 1

花了一个小时，仍然找不到合适的标签填充选项。

我的解决办法是用新的行和空格填充标签：

['行業競爭情況', ''],
['擁有專利', ''],
'     成本控制',
'     現金流',
['', '回本期'],
['', '營運能力'],
['', '行業潛力'],
'行業網絡     ',
'團隊經驗     ',
['計劃的完整性', ''],

结果是可以接受的：

​

如果你愿意的话，让它自动：

scale: {
  pointLabels: {
    callback: function (label, i, labels) {}...

Answer 2

我有同样的问题，在问题中描述，也无法找到一个解决方案，使用已知的图表选项。

但是，下面是另一个解决方案，用于实现与所需的填充类似的行为(尽管不完全是这样)：

ticks: {
    display: false,
    max: 11, // notice how this is +1 more than what you actually want
},

gridLines: {
    display: true,
    color: [ 
        "#dddddd", "#dddddd", "#dddddd", "#dddddd", "#dddddd",
        "#dddddd", "#dddddd", "#dddddd", "#dddddd", "#dddddd",
        "transparent" ], // notice how the last (additional) line is set to transparent
},

angleLines: {
    display: true,
    color: "#dddddd",
},

其想法是添加一个带有透明颜色的额外网格线。虽然这不会在pointLabels和angleLines之间造成任何填充，但它确实会导致标签和下一个gridLine之间存在一个gridLine值的空间。对我来说，这至少看起来更好一些。

请注意，这是可行的，只有当你不需要显示滴答(或如果你对你的刻度，显示一个额外的滴答值，你没有实际使用)。

Answer 3

我使用chart.js 2.6.0。我和你一样有同样的问题。我只使用雷达类型图表，并修改如下。

​

// chart.js v2.6.0
function adjustPointPositionForLabelHeight(angle, textSize, position) {
		console.log(position.y);
		if (angle === 90 || angle === 270) {
			position.y -= (textSize.h / 2);
		} else if (angle > 270 || angle < 90) {
			position.y -= textSize.h;
		position.y -= 7;	//add source 
		}
	}

​