在 amcharts 实体仪表中的类别轴上显示 Y 轴值

编程问答 2022-05-02

问题描述

HTML :

<div id="chartdiv"></div>

CSS：

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

Ts：

am4core.useTheme(am4themes_animated);


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


chart.data = [{
  "category": "Research","value": 80,"full": 100
},{
  "category": "Marketing","value": 35,{
  "category": "distribution","value": 92,"full": 100
}];

chart.startAngle = -90;
chart.endAngle = 180;
chart.innerRadius = am4core.percent(20);

var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.datafields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.labels.template.adapter.add("fill",function(fill,target) {
  return (target.dataItem.index >= 0) ? chart.colors.getIndex(target.dataItem.index) : fill;
});

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

valueAxis.min = 0;
valueAxis.max = 100;
valueAxis.strictMinMax = true;


var series1 = chart.series.push(new am4charts.RadarColumnSeries());
series1.datafields.valueX = "full";
series1.datafields.categoryY = "category";
series1.clustered = false;
series1.columns.template.fill = new am4core.InterfaceColorSet().getFor("alternativeBackground");

var series2 = chart.series.push(new am4charts.RadarColumnSeries());
series2.datafields.valueX = "value";
series2.datafields.categoryY = "category";
series2.columns.template.adapter.add("fill",target) {
  return chart.colors.getIndex(target.dataItem.index);
});

输出：

enter image description here

我想要的：

enter image description here

值应与类别一起显示...用户不应在图表上查看值。 我不想让工具提示看到值.....

任何人都知道如何做到这一点......

谢谢...!!!

解决方法

在您的代码中添加这一行，它会有所帮助
检查amchart label bullets

var valueLabel = series2.bullets.push(new am4charts.LabelBullet());
valueLabel.label.text = "{value}";
valueLabel.locationX = 1;
amchartsamcharts4angularangular