在 amcharts4 雷达图上旋转 CategoryAxis 标签答案

【问题标题】：Rotate CategoryAxis labels on amcharts4 radar chart在 amcharts4 雷达图上旋转 CategoryAxis 标签
【发布时间】：2020-12-08 03:24:06
【问题描述】：

我正在尝试旋转 amchart 雷达图 上的 CategoryAxis 标签，以对雷达列更有意义的方式放置它们。

到目前为止，我所做的只是旋转整个图表，但我想要实现的是移动类别标签（示例中为类别 1、类别 2、类别 3），以便将它们放置在“pie-slice”保存类别数据，而不是在它的边缘。

am4core.useTheme(am4themes_animated);

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

chart.data = [{
  "category": "category1",
      "employee1": 100,
      "employee2": 200,
      "employee3": 100,

}, {
  "category": "category2",

      "employee1": 300,
      "employee2": 100,
      "employee3": 150
}, {
  "category": "category3",
    "employee1": 200,
    "employee2": 200,
    "employee3": 250
}];

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

let series1= chart.series.push(new am4charts.RadarColumnSeries());      
series1.dataFields.valueY = "employee1";
series1.dataFields.categoryX = "category";
    
let series2= chart.series.push(new am4charts.RadarColumnSeries());      
series2.dataFields.valueY = "employee2";
series2.dataFields.categoryX = "category";
    
let series3= chart.series.push(new am4charts.RadarColumnSeries());      
series3.dataFields.valueY = "employee3";
series3.dataFields.categoryX = "category";

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 400px;
}

<script src="//cdn.amcharts.com/lib/4/core.js"></script>
<script src="//cdn.amcharts.com/lib/4/charts.js"></script>
<script src="//cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

【问题讨论】：

标签： javascript amcharts amcharts4

【解决方案1】：

希望这会成功。

对所有 4 个系列执行以下操作：

let valueLabel = series1.columns.template.createChild(am4core.Label)
valueLabel.text = '{employee1}'
valueLabel.fontSize = 14
valueLabel.valign = 'top'
valueLabel.fill = am4core.color('#fff')
valueLabel.rotation = 270
valueLabel.dy = 10
valueLabel.strokeWidth = 0

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。
对不起，它不起作用。

【解决方案2】：

所以，我找到了这个问题的答案：

 let valueLabel = series.bullets.push(new am4charts.LabelBullet())
 valueLabel.label.text = '{value}'
 valueLabel.locationX = 1
 valueLabel.dx = -30
 valueLabel.fontSize = 14

【讨论】：