amcharts v4 - 如何从 XY 图表中获取系列和项目符号元素？

Question

假设 XY 图表是这样创建的：

let charts = [];

function createChart() {
  am4core.useTheme(am4themes_animated);

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

  // Add data
  chart.data = [{
    "date": new Date(2018, 0, 1),
    "value": 450,
    "showTooltip": "always"
  }, ...,
  {
    "date": new Date(2018, 0, 5),
    "value": 500,
    "showTooltip": "always",
    "orientation": "up",
    "offset": 5
  }];

  // Create axes
  let dateAxis = chart.xAxes.push(new am4charts.DateAxis());

  ...

  let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

  // Create series
  let series = chart.series.push(new am4charts.LineSeries());

  ...

  let bullet = series.bullets.push(new am4charts.CircleBullet());

  ...

  charts.push(chart);
}

function modifyTooltip() {
  let chart = charts[0];

  // How to get the first bullet, second bullet, third bullet of the XY chart?
  let bullets = chart.series.bullet; // <- undefined
}

目标是修改第一个、第二个和第三个项目符号工具提示显示，在

function modifyTooltip()

:

bullets.propertyFields.showTooltipOn = "showTooltip";

图表和第一、第二和第三个项目符号如下所示：

参考资料：Codepen - amcharts v4 XYchart 示例

是否有任何方法可以遍历系列中的所有项目符号，以便可以使用

propertyFields

修改特定项目符号的工具提示属性？

提前致谢

Answer 1

这就是系列和项目符号元素：

...

function modifyTooltip() {
  // Get series element from XY chart
  let series = charts[0].series.getIndex(0);
  
  // Get bullets element from series
  let bullets = series.bullets.getIndex(0);

  // Only display tooltip on particular bullets
  bullets.propertyFields.showTooltipOn = "showTooltip";
}

具体的子弹，这里指的是子弹1、子弹2、子弹3，如图所示

---

解释：

// Get series element from XY chart
let series = charts[0].series.getIndex(0);

Amcharts v4 XY 图表文档 声明它具有系列属性。

Series 属性的类型是 ListTemplate 可以用

getIndex()

方法获得。

解释：

// Get bullets element from series
let bullets = series.bullets.getIndex(0);

Series 有一个名为 bullets 的属性，根据 Amcharts v4 系列文档。 Bullets 和 series 一样，是 ListTemplate 类型。这意味着，可以使用

getIndex()

方法检索它。

解释：

// Only display tooltip on particular bullets
bullets.propertyFields.showTooltipOn = "showTooltip";

“为什么

bullets.propertyFields.showTooltipOn = "showTooltip";

可以 选择某些项目符号（项目符号 1、项目符号 2 和项目符号 3）？”

钥匙在

chart.data

。它应该看起来像这样：

chart.data = [{
  "date": new Date(2018, 0, 1),
  "value": 450,
  "showTooltip": "always"
}, {
  "date": new Date(2018, 0, 2),
  "value": 269,
  "showTooltip": "always"
}, {
  "date": new Date(2018, 0, 3),
  "value": 700,
  "showTooltip": "always"
}, {
  "date": new Date(2018, 0, 4),
  "value": 490
}, {
  "date": new Date(2018, 0, 5),
  "value": 500
}];

chart.data

的前三个元素包含

showTooltip

属性，该属性确定表示该元素的项目符号是否应显示工具提示.

注意： 属性名称可以不是

showTooltip

.

假设属性名称是

isTooltipShown

.

chart.data = [{
  "date": new Date(2018, 0, 1),
  "value": 450,
  "isTooltipShown": "always"
}, {
  "date": new Date(2018, 0, 2),
  "value": 269,
  "isTooltipShown": "always"
}, {
  "date": new Date(2018, 0, 3),
  "value": 700,
  "isTooltipShown": "always"
}, {
  "date": new Date(2018, 0, 4),
  "value": 490
}, {
  "date": new Date(2018, 0, 5),
  "value": 500
}];

因此，

function modifyTooltip()

中的那个应该是：

...
// Only display tooltip on particular bullets
bullets.propertyFields.showTooltipOn = "isTooltipShown";

另一个键是

propertyFields

。当用数据中的值覆盖系列中的项目的属性时，这是至关重要的。了解更多：Amcharts v4 - 选择性粘性工具提示.