如何在amcharts雷达图中使标签弯曲

Question

我想像这里的饼图一样弯曲雷达图的标签https://codepen.io/team/amcharts/pen/wNYbbo

如何在此雷达图上实现相同的弯曲标签

下面是我的雷达图的代码sn-ps

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

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: 600px;
}

am4core.useTheme(am4themes_animated);
// Themes end

var chart = am4core.create("chartdiv", am4charts.RadarChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

chart.data = [
  {
    category: "Happiness",
    value1: 8,
    "config":{"fill": "red"},
    "background": {"fill":"green"}
  },
  {
    category: "Anxiety",
    value1: 9,
    "config":{"fill": "blue"}
  },
  {
    category: "Three",
    value1: 7,
    "config":{"fill": "green"}
  },
  {
    category: "Four",
    value1: 1,
    "config":{"fill": "red"}
  },
  {
    category: "Five",
    value1: 2,
    "config":{"fill": "orange"}
  },
  {
    category: "Six",
    value1: 5,
    value2: -5,
    "config":{"fill": "black"}
  }
];

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.labels.template.location = 0.5;
categoryAxis.renderer.tooltipLocation = 0.5;
categoryAxis.renderer.cellStartLocation = 0;
categoryAxis.renderer.cellEndLocation = 1;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.renderer.labels.template.horizontalCenter = "left";
valueAxis.min = 0;

var series1 = chart.series.push(new am4charts.RadarColumnSeries());

series1.columns.template.tooltipText = "{category}: {valueY.value}";
series1.columns.template.width = am4core.percent(100);
series1.name = "Series 1";
series1.dataFields.categoryX = "category";
series1.dataFields.valueY = "value1";
series1.columns.template.radarColumn.configField = 'config';


chart.seriesContainer.zIndex = -1;

chart.scrollbarX = new am4core.Scrollbar();
chart.scrollbarX.exportable = false;
chart.scrollbarY = new am4core.Scrollbar();
chart.scrollbarY.exportable = false;

chart.cursor = new am4charts.RadarCursor();
chart.cursor.xAxis = categoryAxis;
chart.cursor.fullWidthXLine = true;
chart.cursor.lineX.strokeOpacity = 0;
chart.cursor.lineX.fillOpacity = 0.1;

https://codepen.io/omar630/pen/KKWWbNe?editors=0010

这里是codepen链接

只需要在各个区域部分外部弯曲的标签

Answer 1

var chart = am4core.create("chartdiv", am4charts.RadarChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

chart.data = [
  {
    category: "Happiness",
    value1: 8,
    "config":{"fill": "red"},
    "background": {"fill":"green"}
  },
  {
    category: "Anxiety",
    value1: 9,
    "config":{"fill": "blue"}
  },
  {
    category: "Three",
    value1: 7,
    "config":{"fill": "green"}
  },
  {
    category: "Four",
    value1: 1,
    "config":{"fill": "red"}
  },
  {
    category: "Five",
    value1: 2,
    "config":{"fill": "orange"}
  },
  {
    category: "Six",
    value1: 5,
    value2: -5,
    "config":{"fill": "black"}
  }
];

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.labels.template.location = 0.5;
categoryAxis.renderer.tooltipLocation = 0.5;
categoryAxis.renderer.cellStartLocation = 0;
categoryAxis.renderer.cellEndLocation = 1;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.renderer.labels.template.horizontalCenter = "left";
valueAxis.min = 0;

var series1 = chart.series.push(new am4charts.RadarColumnSeries());

series1.columns.template.tooltipText = "{category}: {valueY.value}";
series1.columns.template.width = am4core.percent(100);
series1.name = "Series 1";
series1.dataFields.categoryX = "category";
series1.dataFields.valueY = "value1";
series1.columns.template.radarColumn.configField = 'config';


chart.seriesContainer.zIndex = -1;

chart.scrollbarX = new am4core.Scrollbar();
chart.scrollbarX.exportable = false;
chart.scrollbarY = new am4core.Scrollbar();
chart.scrollbarY.exportable = false;

chart.cursor = new am4charts.RadarCursor();
chart.cursor.xAxis = categoryAxis;
chart.cursor.fullWidthXLine = true;
chart.cursor.lineX.strokeOpacity = 0;
chart.cursor.lineX.fillOpacity = 0.1;

//add below lines in your code

categoryAxis.renderer.labels.template.adapter.add("rotation", function (rotation, target) {
  var value = target.dataItem.category;
  var position = categoryAxis.categoryToPosition(value);
  var angle = categoryAxis.renderer.positionToAngle(position) + 90;
  return angle;
});

试试这个，它会检查添加的底线。

Answer 2

在这里找到的解决方案是 sn-p

am4core.ready(function () {

    // the chart 
    var chart = am4core.create("amchart_wheel_of_life", am4charts.RadarChart);
    chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
    chart.innerRadius = am4core.percent(30);
    chart.width = am4core.percent(100);
    chart.height = am4core.percent(100);
    chart.seriesContainer.zIndex = -1; // grid over series
    //chart.seriesContainer.background.fill = '#0f0'
    //chart.seriesContainer.opacity = 0.5
    //chart.padding(20, 20, 20, 20);

    // chart data
    var wheel_data = [
        {
            'range': 'another',
            'data': [{
                "category": "another",
                "value": 10,
                "color": chart.colors.next(),
            }]
        },{
            'range': 'Your hapsadpiness',
            'data': [{
                "category": "your haasdppiness",
                "value": 10,
                "color": chart.colors.next(),
            }]
        },{
            'range': 'Your happiness',
            'data': [{
                "category": "your happiness",
                "value": 10,
                "color": chart.colors.next(),
            }]
        }, {
            'range': 'Self Esteem',
            'data': [{
                "category": "self esteem",
                "value": 6,
                "color": chart.colors.next()
            }]
        }, {
            'range': 'Your Mood',
            'data': [{
                "category": "your mood",
                "value": 3,
                "color": chart.colors.next()
            }]
        }, {
            'range': 'Digital Usage',
            'data': [{
                "category": "digial usage",
                "value": 7,
                "color": chart.colors.next()
            }]
        }, {
            'range': 'Job Satisfaction',
            'data': [{
                "category": "Job Satisfaction",
                "value": 9,
                "color": chart.colors.next()
            }]
        }, {
            'range': 'your calmness',
            'data': [{
                "category": "sad",
                "value": 5,
                "color": chart.colors.next()
            }]
        }, {
            'range': 'stress level',
            'data': [{
                "category": "stress level",
                "value": 2,
                "color": chart.colors.next()
            }]
        }];


    // interaction
    var categoryIndex = 0;
    chart.cursor = new am4charts.RadarCursor();
    chart.cursor.innerRadius = am4core.percent(25);
    chart.cursor.behavior = "none"; // disable zoom
    //chart.cursor.lineX.disabled = true;
    //chart.cursor.lineY.fillOpacity = 0.1;
    //chart.cursor.lineY.fill = am4core.color("#000000");
    //chart.cursor.lineY.strokeOpacity = 0;
    //chart.cursor.fullWidthLineY = true;
    chart.cursor.events.on("cursorpositionchanged", function (ev) { // up
        var xAxis = ev.target.chart.xAxes.getIndex(0);
        var yAxis = ev.target.chart.yAxes.getIndex(0);
        categoryIndex = xAxis.positionToIndex(xAxis.toAxisPosition(ev.target.xPosition));
        //console.log(yAxis.toAxisPosition(ev.target.yPosition));
        //console.log("y: ", yAxis.positionToValue(yAxis.toAxisPosition(ev.target.yPosition)));
    });

    // var interaction = am4core.getInteraction();
    // interaction.events.on("up", function (event) {
    //     var point = am4core.utils.documentPointToSprite(event.pointer.point, chart.seriesContainer);
    //     var empty = 4.2;
    //     var x = (valueAxis.max + empty) - valueAxis.xToValue(point.x);
    //     var y = (valueAxis.max + empty) - valueAxis.yToValue(point.y);
    //     var r = Math.sqrt(x * x + y * y) - empty;
    //     //console.log(x,y,r);
    //     if (r > valueAxis.min - 1 && r < valueAxis.max) {
    //         //console.log(r);
    //         setValue(categoryIndex, Math.ceil(r));
    //     }
    // });

    // set value
    function setValue(index, value) {
        chart.data[index].value = value;
        chart.invalidateRawData();
    }

    // categoryAxis 
    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
  // categoryAxis.renderer.lebels.template.background = 'black';
    categoryAxis.dataFields.category = "category";
    categoryAxis.renderer.labels.template.location = 0.5;
    categoryAxis.renderer.tooltipLocation = 0.5;
    categoryAxis.renderer.labels.template.bent = true;
    categoryAxis.renderer.labels.template.padding(0, 0, 0, 0);
    categoryAxis.renderer.labels.template.fill = am4core.color("#414042");
    // categoryAxis.renderer.fill = am4core.color('red')
  
    categoryAxis.renderer.labels.template.disabled = true; //hide label name
  
    categoryAxis.renderer.grid.template.strokeDasharray = "1,2"
    categoryAxis.renderer.labels.template.adapter.add("radius", (innerRadius, target) => {
        return -valueAxis.valueToPoint(-3.8).y;
    });
    categoryAxis.tooltip.defaultState.properties.opacity = 0.; // hide tooltip
    /*categoryAxis.renderer.axisFills.template.disabled = false;
   categoryAxis.renderer.axisFills.template.fillOpacity = 1;
   categoryAxis.renderer.axisFills.template.fill = am4core.color("#e7e8e8");
   */

    // valueAxis
    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    //valueAxis.renderer.labels.template.disabled = true;
    valueAxis.renderer.labels.template.fill = am4core.color("#414042");
    valueAxis.min = 0;
    valueAxis.max = 10;
    valueAxis.renderer.minGridDistance = 10;
    valueAxis.fontSize = '10px';
    // valueAxis.renderer.labels.template.adapter.add("dy", (innerRadius, target) => {
    //     return -valueAxis.valueToPoint(-3.7).y;
    // });

    // series
    var series = chart.series.push(new am4charts.RadarColumnSeries());
    series.columns.template.width = am4core.percent(100);
    series.columns.template.strokeWidth = 0;
    series.columns.template.column.propertyFields.fill = "color";
    series.dataFields.categoryX = "category";
    series.dataFields.valueY = "value";

    // series tootltip
    series.columns.template.tooltipText = "{categoryX}: {valueY.value}";
    series.tooltip.getFillFromObject = false;
    series.tooltip.background.fill = am4core.color("#f7aa00");
    series.tooltip.label.fill = am4core.color("#414042");
    series.tooltip.label.fontWeight = 'bold';
    series.tooltip.background.strokeOpacity = 0;

    // center image
    var image = categoryAxis.createChild(am4core.Image);
    image.horizontalCenter = "middle";
    image.verticalCenter = "middle";
    image.href = "https://happimynd.com/images/icons/icon-512x512.png";
    image.width = am4core.percent(23);
    image.height = am4core.percent(23);
    
    // image.zIndex = 1; // grid over series

    var circle = chart.seriesContainer.createChild(am4core.Circle);
    circle.horizontalCenter = "middle";
    circle.verticalCenter = "middle";
    circle.fill = am4core.color('#e7e8e8');
    circle.zIndex = -5; // grid over seriesd
    categoryAxis.events.on('sizechanged', (ev) => {
        circle.radius = -valueAxis.valueToPoint(11.5).y;
    });


    function generateRadarData() {
        let data = [];
        for (let i in wheel_data) {

            // capitalize
            for (let t in wheel_data[i].data) {
                wheel_data[i].data[t].category = wheel_data[i].data[t].category.toUpperCase();
            }
            data = data.concat(wheel_data[i].data);
            createRange(wheel_data[i].range, wheel_data[i].data, i);
        }
        //console.log(data);
        return data;
    }

    function createRange(name, data, index) {
        let axisRange = categoryAxis.axisRanges.create();
        axisRange.text = name.toUpperCase();

        // first country
        axisRange.category = data[0].category;

        // last country
        axisRange.endCategory = data[data.length - 1].category;

        // range grid
        //axisRange.grid.disabled = true;
        axisRange.label.mouseEnabled = false;
        axisRange.grid.stroke = am4core.color("#FFFFFF");
        axisRange.grid.strokeWidth = 1;
        axisRange.grid.strokeOpacity = 1;
        axisRange.grid.strokeDasharray = "0,0";
        axisRange.grid.adapter.add("radius", (innerRadius, target) => {
            return -valueAxis.valueToPoint(13.8).y;
        });

        // range background 
        let axisFill = axisRange.axisFill;
        axisFill.fill = data[0].color; // chart.colors.next
      
        axisFill.disabled = false;
        axisFill.fillOpacity = 1;
        axisFill.adapter.add("innerRadius", (innerRadius, target) => {
            return -valueAxis.valueToPoint(11.5).y;
        });
        axisFill.adapter.add("radius", (innerRadius, target) => {
            return -valueAxis.valueToPoint(13.8).y;
        });
        //axisFill.togglable = true;
        //axisFill.showSystemTooltip = true;
        //axisFill.readerTitle = "click to zoom";
        //axisFill.cursorOverStyle = am4core.MouseCursorStyle.pointer;

        // range label
        let axisLabel = axisRange.label;
        axisLabel.location = 0.5;
        axisLabel.fill = am4core.color("#414042");
        axisLabel.fontWeight = 'bold';
        axisLabel.fontSize = '10px';
        axisLabel.adapter.add("radius", (innerRadius, target) => {
            return -valueAxis.valueToPoint(-1.9).y;
        });
    }

    chart.data = generateRadarData();

});

#amchart_wheel_of_life {
  width: 100%;
  height: 98vh;
  font-family:arial; 
}

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>

<div id="amchart_wheel_of_life"></div>

https://codepen.io/omar630/pen/YzZVVGr