8

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

雷达图

我的配置：

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

这里的问题是“通信”标签在标签和数字 100 之间有 0 填充。如何配置此填充和/或解决此问题？

4

7 回答 7

7

Spent an hour and still can't find the proper label padding options.

My workaround is padding the labels with newlines and spaces:

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

The outcome is acceptable:enter image description here

Make it auto if you wish:

scale: {
  pointLabels: {
    callback: function (label, i, labels) {}...
于 2017-09-14T11:17:08.713 回答
3

我遇到了与问题中描述的相同的问题，并且也无法使用已知的图表选项找到解决方案。

但是，这是实现类似于所需填充的行为的另一种解决方法（尽管不完全是）：

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 之间有任何填充，但它确实会导致 label 和下一个 gridLine 之间有一个 gridLine 的空间。对我来说，这至少看起来好一点。

请注意，这仅在您不需要显示刻度时才可行（或者如果您对您的刻度显示一个您实际不使用的额外刻度值感到满意）。

于 2018-02-25T21:14:10.063 回答
1

我使用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 
		}
	}

于 2018-11-21T06:03:30.443 回答
0

@ketysek提到的PR请求最终于 2021 年 3 月合并。

pointLabels.padding

options: {{
  scale: {
      pointLabels: {
        padding: 10, // Enter number here
      },
}};
于 2021-06-02T16:13:00.803 回答
0

每当我的PR将被合并时，pointLabels.padding都会添加选项；）

于 2018-12-15T15:20:54.990 回答
0

通常问题出现在第一个pointLabel当它是单行时，您可以在选项中添加回调，如下所示

pointLabels: {
      callback: function (label, index) {
        /* Hack to add spacing between first pointLabel item and radar graph */
        return index == 0 && label.length == 1? [''].concat(label): label;
      }

制作pointLabel多行文本可以解决问题。

编辑： 当前版本chartjs是2.7.3. 即将发布的版本可能会解决这个问题。

于 2019-01-01T12:24:42.763 回答
0

var pointLabelPosition = scale.getPointPosition(i, outerDistance + 5);

-> var pointLabelPosition = scale.getPointPosition(i, outerDistance + 15);

于 2020-06-03T09:39:37.717 回答