Chart.js2 Radar，如何配置标签padding/spacing？

Question

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

我的配置：

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

这里的问题是 "Communication" 标签在标签和数字 100 之间有 0 个填充。我如何配置这个填充 and/or 解决这个问题？

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 之间有一个价值 space 的 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 
  }
 }

Answer 4

每当合并我的 PR 时，都会添加 pointLabels.padding 选项 ;)

Answer 5

通常第一个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。即将发布的版本可能会解决这个问题。

Answer 6

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

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

Answer 7

PR request mentioned by @ketysek 最终于 2021 年 3 月合并。

pointLabels.padding

options: {{
  scale: {
      pointLabels: {
        padding: 10, // Enter number here
      },
}};

Chart.js2 Radar，如何配置标签padding/spacing？

Chart.js2 Radar, how to configure the label padding/spacing?

charts

chart.js

chart.js2

react-chartjs