微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

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

分类：编程问答

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

我想像在饼图中那样将雷达图的标签曲线化https://codepen.io/team/amcharts/pen/wNYbbo

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

下面是我的雷达图的代码片段

<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

这里是代码笔链接

只需要在相应区域部分外弯曲的标签

解决方法

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;
});

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

,

在这里找到的解决方案是代码片段

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);

    // chart data
    var wheel_data = [
        {
            'range': 'another','data': [{
                "category": "another","value": 10,"color": chart.colors.next(),}]
        },{
            'range': 'Your hapsadpiness','data': [{
                "category": "your haasdppiness",{
            'range': 'Your happiness','data': [{
                "category": "your happiness",{
            'range': 'Self Esteem','data': [{
                "category": "self esteem","value": 6,"color": chart.colors.next()
            }]
        },{
            'range': 'Your Mood','data': [{
                "category": "your mood","value": 3,{
            'range': 'Digital Usage','data': [{
                "category": "digial usage","value": 7,{
            'range': 'Job Satisfaction','data': [{
                "category": "Job Satisfaction","value": 9,{
            'range': 'your calmness','data': [{
                "category": "sad","value": 5,{
            '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);
    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",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",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",target) => {
            return -valueAxis.valueToPoint(11.5).y;
        });
        axisFill.adapter.add("radius",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",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

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot