如何调整Amcharts 4 Radar Chart雷达图网格与标签的间距

实现方案 #

你可以通过以下两种方式自定义网格与标签的间距，两种方式可单独使用也可搭配使用：

• 方式一：收缩雷达网格的绘制范围
  通过调整雷达图的radius属性控制网格整体的大小，数值越小网格越向内收缩，和外围标签的间距就越大，支持百分比或固定像素值：

// 可直接加在图表实例创建完成后的任意位置，默认值约为80%
chart.radius = "60%";

• 方式二：调整外围类别标签的偏移位置
  通过修改类别轴的标签radius属性，让标签向外偏移，直接拉开与最外层网格的距离，数值越大间距越大：

// 加在categoryAxis实例定义完成之后
categoryAxis.renderer.labels.template.radius = 15; // 默认值为5，可按需调整

如果你需要调整的是径向网格与值轴标签的间距，可添加以下配置：

// 加在valueAxis实例定义完成之后
valueAxis.renderer.labels.template.radius = 10;

完整修改后的JS代码示例 #

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.RadarChart);

// Add data
chart.data = [{
  "country": "Lithuania",
  "litres": 501
}, {
  "country": "Czech Republic",
  "litres": 301
}, {
  "country": "Ireland",
  "litres": 266
}, {
  "country": "Germany",
  "litres": 165
}, {
  "country": "Australia",
  "litres": 139
}, {
  "country": "Austria",
  "litres": 336
}, {
  "country": "UK",
  "litres": 290
}, {
  "country": "Belgium",
  "litres": 325
}, {
  "country": "The Netherlands",
  "litres": 40
}];


/* Create axes */
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
// 调整类别标签向外偏移
categoryAxis.renderer.labels.template.radius = 15;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// 如需调整值标签与径向网格的距离，可取消注释下面一行
// valueAxis.renderer.labels.template.radius = 10;

// 收缩网格半径，拉大与标签间距
chart.radius = "60%";

/* Create and configure series */
var series = chart.series.push(new am4charts.RadarSeries());
series.dataFields.valueY = "litres";
series.dataFields.categoryX = "country";
series.strokeWidth = 2;

内容的提问来源于stack exchange，提问作者SHl MRJ