为了账号安全,请及时绑定邮箱和手机立即绑定

amCharts 中项目符号(箭头)的旋转

amCharts 中项目符号(箭头)的旋转

一只萌萌小番薯 2022-05-26 16:55:28
我有一个图表显示了选定国家的两个时间点的变量演变。箭头代表时间 2 中的水平。当值在时间 1 和时间 2 之间减小时(在我的示例中为意大利和德国),我希望箭头向下(旋转 180°)。相反,当值在时间 1 和时间 2 之间增加时,箭头应该向上(在我的示例中为瑞士、法国和西班牙)。有谁知道我可以在我的 amCharts 中添加一段代码来自动旋转箭头?我有一个带有我的数据和图形的 CodePen:https ://codepen.io/European-DataLab/pen/qBdyzap我的代码是:// Create chart instancevar chart = am4core.create("chartdiv", am4charts.XYChart);// Add datachart.data = [  {"Country":"Switzerland","time2":878,"time1":270}, {"Country":"France","time2":1861,"time1":1237}, {"Country":"Spain","time2":3431,"time1":1987.6667}, {"Country":"Italy","time2":322,"time1":3911}, {"Country":"Germany","time2":940,"time1":1120}];// Create axis Xvar categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());categoryAxis.dataFields.category = "Country";categoryAxis.renderer.grid.template.location = 0;categoryAxis.renderer.minGridDistance = 1;categoryAxis.renderer.labels.template.rotation = -45;categoryAxis.renderer.labels.template.verticalCenter = "top";categoryAxis.renderer.labels.template.horizontalCenter = "right";categoryAxis.renderer.grid.template.disabled = true;// Create axis Yvar valueAxis = chart.yAxes.push(new am4charts.ValueAxis());// Series for linking dot and arrowvar series = chart.series.push(new am4charts.ColumnSeries());series.dataFields.categoryX = "Country";series.dataFields.openValueY = "time1";series.dataFields.valueY = "time2";series.sequencedInterpolation = true;series.fillOpacity = 0;series.strokeOpacity = 1;series.columns.template.stroke = am4core.color("#000000")series.columns.template.width = 0.01;series.tooltip.pointerOrientation = "horizontal";//Series for Time 2var dot1_1 = chart.series.push(new am4charts.LineSeries());dot1_1.dataFields.valueY = "time2";dot1_1.dataFields.categoryX = "Country";dot1_1.strokeWidth = 0;dot1_1.name = "Time 2";
查看完整描述

1 回答

?
aluckdog

TA贡献1847条经验 获得超7个赞

这应该做的工作:


arrow.adapter.add("rotation", function(rotation, target){

  if(target.dataItem.dataContext.time1 < target.dataItem.dataContext.time2){

    return 0

  }

  else{

    return 180

  }

})


查看完整回答
反对 回复 2022-05-26
  • 1 回答
  • 0 关注
  • 174 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号