Вращение пуль (стрелок) в amCharts - PullRequest
Новая
       5

Вращение пуль (стрелок) в amCharts

2 голосов
/ 23 марта 2020

У меня есть рисунок, показывающий эволюцию переменной для двух моментов времени для выбора стран.

Стрелки представляют уровень во времени 2. Когда значение уменьшается между временем 1 и временем 2 ( для Италии и Германии в моем примере) хотелось бы, чтобы стрелки go опускались (поворот на 180 °). Напротив, когда значение увеличивается между временем 1 и временем 2, стрелки должны go вверх (Швейцария, Франция и Испания в моем примере).

Кто-нибудь знает фрагмент кода, который я мог бы добавить в моих 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;

1 Ответ

2 голосов
/ 24 марта 2020

Это должно сделать работу: 

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