如何调整雷达图中的categoryXField和valueYField位置？

Question

我只想将categoryXField和valueYField调整到相同的位置，就像这张照片一样。 这是我的代码。

function amchart_on_libload(objInst, chart_type){createRadarChart();}

function createRadarChart(){

var root = this.RadarChart_1.getroot();

// Create chartlet chart = root.container.children.push(am5radar.RadarChart.new(root, {panX: false,panY: false,wheelX: "panX",wheelY: "zoomX"}));

// Add cursorlet cursor = chart.set("cursor", am5radar.RadarCursor.new(root, {behavior: "zoomX"}));

cursor.lineY.set("visible", false);

// Create axes and their rendererslet xRenderer = am5radar.AxisRendererCircular.new(root, {

});xRenderer.labels.template.setAll({textType: "adjusted",radius: 20,

});let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {maxDeviation: 0,categoryField: "country",renderer: xRenderer,tooltip: am5.Tooltip.new(root, {})}));

var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {renderer: am5radar.AxisRendererRadial.new(root, {}),min: 0,max: 100}));

// Create serieslet series = chart.series.push(am5radar.RadarLineSeries.new(root, {name: "Series",xAxis: xAxis,yAxis: yAxis,valueYField: "litres",categoryXField: "country",tooltip:am5.Tooltip.new(root, {labelText:"{valueY}"})}));

series.strokes.template.setAll({strokeWidth: 1

});

// Set datalet data = [{"country": "Lithuania","litres": 100}, {"country": "Czechia","litres": 90}, {"country": "Ireland","litres": 50}, {"country": "Germany","litres": 40}, ];series.data.setAll(data);xAxis.data.setAll(data);

series.appear(1000);chart.appear(1000, 100);

}

Answer 1

您可以通过将 textType 属性添加到 xAxis 渲染器标签模板并将其设置为 adjusted

来实现所需的结果

xRenderer.labels.template.setAll({
        radius: 10,
        textType: "adjusted",
    });

您可以在这里找到可行的解决方案