amCharts 中项目符号（箭头）的旋转

Question

我有一张图显示了选定国家的两个时间点的变量演变。

箭头表示时间 2 中的水平。当值在时间 1 和时间 2 之间减小时（在我的示例中为意大利和德国），我希望箭头向下（旋转 180°）。相反，当值在时间 1 和时间 2 之间增加时，箭头应该向上（在我的例子中是瑞士、法国和西班牙）。

有谁知道我可以在我的 amCharts 中添加一段代码来自动旋转箭头？

我有一个 CodePen，里面有我的数据和图形：https://codepen.io/European-DataLab/pen/qBdyzap

我的代码是：

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);


// Add data
chart.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 X
var 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 Y
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

// Series for linking dot and arrow
var 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 2
var 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";

// Add a bullet/arrow
var bullet = dot1_1.bullets.push(new am4charts.Bullet());
var arrow = bullet.createChild(am4core.Triangle);
arrow.horizontalCenter = "middle";
arrow.verticalCenter = "middle";
arrow.stroke = am4core.color("#fff");
arrow.fillOpacity = 0.8;
arrow.direction = "top";
arrow.width = 15;
arrow.height = 15;


//Series time 1
var dot1_2 = chart.series.push(new am4charts.LineSeries());
dot1_2.dataFields.valueY = "time1";
dot1_2.dataFields.categoryX = "Country";
dot1_2.name = "Time 1";
dot1_2.strokeWidth = 0;
dot1_2.fill = am4core.color("#000000");

// Add a bullet/rectangle
var bullet = dot1_2.bullets.push(new am4charts.Bullet());
var rect = bullet.createChild(am4core.Rectangle);
rect.horizontalCenter = "middle";
rect.verticalCenter = "middle";
rect.strokeWidth = 0;
rect.fill = am4core.color("#000000");
rect.fillOpacity = 0.8;
rect.direction = "top";
rect.width = 12;
rect.height = 5;


// Round all numbers to integer
chart.numberFormatter.numberFormat = "#0.";


// Legend settings
chart.legend = new am4charts.Legend();
chart.legend.position = "top";
chart.legend.align = "center";
series.hiddenInLegend = true;


// Cursor animation
chart.cursor = new am4charts.XYCursor();
chart.cursor.lineX.disabled = true;
chart.cursor.lineY.disabled = false;

Answer 1

这应该可以完成工作：

arrow.adapter.add("rotation", function(rotation, target){
  if(target.dataItem.dataContext.time1 < target.dataItem.dataContext.time2){
    return 0
  }
  else{
    return 180
  }
})

amCharts 中项目符号（箭头）的旋转

Rotation of bullets (arrows) in amCharts

javascript

amcharts

amcharts4