如何在雷达的Chartjs标签中增加尺寸和种类

Question

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

我尝试这样做：

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

但是它只会更改'Undefined'标签的名称。

谢谢您的帮助。

Answer 1

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

Answer 2

这里是配置好的雷达网格。

• 标签大小通过：options.scale.pointLabels.fontSize设置
• 标签颜色通过：options.scale.pointLabels.fontColor设置
• 传统字体颜色通过：options.legend.labels.fontColor设置

文档非常好，您应该将其签出：

• https://www.chartjs.org/docs/latest/charts/radar.html
• https://www.chartjs.org/docs/latest/axes/styling.html

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>