amchart 适配器中的目标参数是什么

Question

我正在尝试使用 amchart4 创建方差图。我正在使用演示中的示例。

https://www.amcharts.com/demos/variance-indicators/

适配器上的以下每个用法中的实际目标对象是什么？

是 ValueAxis 还是 CategoryAxis 还是其他？

     // Create axes
    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "year";
    categoryAxis.renderer.grid.template.location = 0;
    categoryAxis.renderer.minGridDistance = 30;
    
    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    valueAxis.min = 0;
    
    // Create series
    var series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.valueY = "value";
    series.dataFields.categoryX = "year";
    
    // Add series for showing variance arrows
    var series2 = chart.series.push(new am4charts.ColumnSeries());
    series2.dataFields.valueY = "valueNext";
    series2.dataFields.openValueY = "value";
    series2.dataFields.categoryX = "year";
    series2.columns.template.width = 1;
    series2.fill = am4core.color("#555");
    series2.stroke = am4core.color("#555");
    
    // Add a triangle for arrow tip
    var arrow = series2.bullets.push(new am4core.Triangle);
    arrow.width = 10;
    arrow.height = 10;
    arrow.horizontalCenter = "middle";
    arrow.verticalCenter = "top";
    arrow.dy = -1;
    
    // Set up a rotation adapter which would rotate the triangle if its a negative change
    arrow.adapter.add("rotation", function(rotation, target) {
      return getVariancePercent(target.dataItem) < 0 ? 180 : rotation;
    });
    
    // Set up a rotation adapter which adjusts Y position
    arrow.adapter.add("dy", function(dy, target) {
      return getVariancePercent(target.dataItem) < 0 ? 1 : dy;
    });
// Add a label
var label = series2.bullets.push(new am4core.Label);
label.padding(10, 10, 10, 10);
label.text = "";
label.fill = am4core.color("#0c0");
label.strokeWidth = 0;
label.horizontalCenter = "middle";
label.verticalCenter = "bottom";
label.fontWeight = "bolder";

// Adapter for label text which calculates change in percent
label.adapter.add("textOutput", function(text, target) {
  var percent = getVariancePercent(target.dataItem);
  return percent ? percent + "%" : text;
});

// Adapter which shifts the label if it's below the variance column
label.adapter.add("verticalCenter", function(center, target) {
  return getVariancePercent(target.dataItem) < 0 ? "top" : center;
});

// Adapter which changes color of label to red
label.adapter.add("fill", function(fill, target) {
  return getVariancePercent(target.dataItem) < 0 ? am4core.color("#c00") : fill;
});

function getVariancePercent(dataItem) {
  if (dataItem) {
    var value = dataItem.valueY;
    var openValue = dataItem.openValueY;
    var change = value - openValue;
    return Math.round(change / openValue * 100);
  }
  return 0;
}

Answer 1

在对象上添加适配器时，第一个参数是您正在修改的值，第二个参数 target 是适配器添加到的对象的实例（如果您添加console.log(target.className)可以看到对象的名称class实例）。因此，在以下代码段中：

// Set up a rotation adapter which would rotate the triangle if its a negative change
arrow.adapter.add("rotation", function(rotation, target) {
  return getVariancePercent(target.dataItem) < 0 ? 180 : rotation;
});

// Set up a rotation adapter which adjusts Y position
arrow.adapter.add("dy", function(dy, target) {
  return getVariancePercent(target.dataItem) < 0 ? 1 : dy;
});

您正在为该系列中的所有三角形项目符号添加适配器，以修改每个项目符号的 rotation 和 dy 属性。第一个参数是适配器正在修改的属性（分别是 rotation 和 dy），target 是与数据点关联的单个项目符号实例。同样：

// Adapter for label text which calculates change in percent
label.adapter.add("textOutput", function(text, target) {
  var percent = getVariancePercent(target.dataItem);
  return percent ? percent + "%" : text;
});

// Adapter which shifts the label if it's below the variance column
label.adapter.add("verticalCenter", function(center, target) {
  return getVariancePercent(target.dataItem) < 0 ? "top" : center;
});

// Adapter which changes color of label to red
label.adapter.add("fill", function(fill, target) {
  return getVariancePercent(target.dataItem) < 0 ? am4core.color("#c00") : fill;
});

每个适配器中的 target 是与系列中的数据点关联的标签（项目符号）实例。

amchart 适配器中的目标参数是什么

What is the target parameter in amchart adapter

javascript

amcharts

amcharts4