如何在雷达的 Chartjs 标签中增加尺寸和系列答案

【问题标题】：How to increase size and family in a radar's Chartjs label如何在雷达的 Chartjs 标签中增加尺寸和系列
【发布时间】：2020-01-27 14:07:21
【问题描述】：

我想增加图表标签中字体的大小和颜色，但它不是图例标签。是雷达图每条数据旁边的名称。

我试过这样做：

    options={{
                legend: {
                    labels: {
                        fontColor: 'rgba(255,255,255,1)',
                        fontSize: 16,
                        fontStyle: "bold"
                    }
                },

但它只会更改“未定义”标签的名称。

感谢您的帮助。

【问题讨论】：

希望有帮助 - stackoverflow.com/a/38305167/1374554

标签： javascript reactjs chart.js

【解决方案1】：

options: {
  scale: {
    pointLabels: {
      fontSize: 16
    }
  }
}

【讨论】：

在手机上怎么办，因为这会使图表歪斜，我们需要更改字体大小还是什么？？

【解决方案2】：

这是一个配置好的雷达网格。

标签大小通过以下方式设置：options.scale.pointLabels.fontSize
标签颜色设置通过：options.scale.pointLabels.fontColor
图例字体颜色设置通过：options.legend.labels.fontColor

文档很不错，你应该去看看：

var skillCanvas = document.getElementById('skillChart');
var skillData = {
  labels: ["Teamwork", "Organization", "Adaptability", "Curiousity", "Self-taught"],
  datasets: [{
    label: "Student A",
    backgroundColor: 'rgba(17, 192, 145, 0.2)',
    data: [90, 80, 92, 88, 75]
  }]
};
var skillChart = new Chart(skillCanvas, {
  type: 'radar',
  data: skillData,
  options: {
    legend: {
      labels: {
        fontColor: '#11c091'
      }
    },
    scale: {
      gridLines: {
        color: '#AAA'
      },
      ticks: {
        beginAtZero: false,
        max: 100,
        min: 20,
        stepSize: 10,
        fontColor: '#fff',
        backdropColor: '#444'
      },
      pointLabels: {
        fontSize: 16,
        fontColor: '#11c091'
      }
    }
  }
});

body {
  background: #444;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css" rel="stylesheet" />
<canvas id="skillChart" width="400" height="200"></canvas>

【讨论】：

【解决方案3】：

对于来自 Chart.js v 3.7.1 或 + 的人，配置有点改变，下面的代码将不再工作。

options: {
  scale: {
    pointLabels: {
      fontSize: 16
    }
  }
}

用这个

options: {
  scales: {
    r: {
      pointLabels: {
        font: {
          size: 16
        }
      }
    }
  }
}

【讨论】：