如何在 amcharts 系列中包含自定义值以进行计算

Question

我们如何在 chart.data 中包含新的自定义变量以根据 avgTime 定义项目符号位置

我们无法将 avgTime 分配给 openBullet.locationX = avgTime;像这样。

如果我将 avgTime 添加到 locationX，则会引发错误，例如未定义 avgTime。

找到以下代码供您参考

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

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

chart.data = [{
  "name": "John",
  "startTime": 8,
  "endTime": 11,
  "avgTime": 0.5,
  "color": chart.colors.next()
}, {
  "name": "Joe",
  "startTime": 10,
  "endTime": 13,
  "avgTime": 0.8,
  "color": chart.colors.next()
}, {
  "name": "Susan",
  "startTime": 11,
  "endTime": 18,
  "avgTime": 0.1,
  "color": chart.colors.next()
}, {
  "name": "Eaton",
  "startTime": 15,
  "endTime": 19,
  "avgTime": 0,
  "color": chart.colors.next()
}];

var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "name";
categoryAxis.renderer.inversed = true;
categoryAxis.renderer.grid.template.location = 0;

var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
//valueAxis.renderer.minGridDistance = 50;

var columnSeries = chart.series.push(new am4charts.ColumnSeries());
columnSeries.dataFields.categoryY = "name";
columnSeries.dataFields.valueX = "endTime";
columnSeries.dataFields.openValueX = "startTime";
columnSeries.columns.template.tooltipText = "[bold]{categoryY}[/]\nstarts at {openValueX}\nends at {valueX}";

var columnTemplate = columnSeries.columns.template;
columnTemplate.strokeOpacity = 0;
columnTemplate.propertyFields.fill = "color";
//columnTemplate.height = am4core.percent(100);

//var openBullet = columnSeries.bullets.create(am4charts.CircleBullet);
//openBullet.locationX = avgTime;

var circleBullet = columnSeries.bullets.push(new am4charts.CircleBullet());
circleBullet.circle.stroke = am4core.color("#fff");
circleBullet.circle.strokeWidth = 2;
circleBullet.locationX = /**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

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

chart.data = [{
  "name": "John",
  "startTime": 8,
  "endTime": 11,
  "avgTime": 0.5,
  "color": chart.colors.next()
}, {
  "name": "Joe",
  "startTime": 10,
  "endTime": 13,
  "avgTime": 0.8,
  "color": chart.colors.next()
}, {
  "name": "Susan",
  "startTime": 11,
  "endTime": 18,
  "avgTime": 0.1,
  "color": chart.colors.next()
}, {
  "name": "Eaton",
  "startTime": 15,
  "endTime": 19,
  "avgTime": 0,
  "color": chart.colors.next()
}];

var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "name";
categoryAxis.renderer.inversed = true;
categoryAxis.renderer.grid.template.location = 0;

var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
//valueAxis.renderer.minGridDistance = 50;

var columnSeries = chart.series.push(new am4charts.ColumnSeries());
columnSeries.dataFields.categoryY = "name";
columnSeries.dataFields.valueX = "endTime";
columnSeries.dataFields.openValueX = "startTime";
columnSeries.columns.template.tooltipText = "[bold]{categoryY}[/]\nstarts at {openValueX}\nends at {valueX}";

var columnTemplate = columnSeries.columns.template;
columnTemplate.strokeOpacity = 0;
columnTemplate.propertyFields.fill = "color";
//columnTemplate.height = am4core.percent(100);

//var openBullet = columnSeries.bullets.create(am4charts.CircleBullet);
//openBullet.locationX = avgTime;

var circleBullet = columnSeries.bullets.push(new am4charts.CircleBullet());
circleBullet.circle.stroke = am4core.color("#fff");
circleBullet.circle.strokeWidth = 2;
circleBullet.locationX = {avgTime};


var labelBullet = columnSeries.bullets.push(new am4charts.LabelBullet());
labelBullet.label.text = "{avgTime}";
labelBullet.label.dx = +20;
labelBullet.locationX = 0.2;;


var labelBullet = columnSeries.bullets.push(new am4charts.LabelBullet());
labelBullet.label.text = "{avgTime}";
labelBullet.label.dx = +20;
labelBullet.locationX = 0.2;

Answer 1

我不太确定我是否正确理解了您的问题。要设置项目符号的位置，您必须根据数据中值的名称设置 propertyFields 中的值：

circleBullet.propertyFields.locationX = "avgTime";

我使用您的示例代码创建了一个code pen。希望对您有所帮助。

编辑：根据 zeroin 的响应，您应该考虑将您的 avgTime 更改为 1 - avgTime，因为它从列的末尾开始呈现.