Amcharts 4柱状图悬停时顶部显示图片及数值的可行性咨询

这个需求完全可以实现，核心是通过监听柱状图的悬停事件，控制柱顶的图片和数值标签的显示/隐藏，并动态绑定对应数据。

以下是修改后的完整实现代码：

JavaScript 代码 #

/**
 * ---------------------------------------
 * 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

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

// Add data（扩展添加图片地址字段）
chart.data = [{
  "country": "USA",
  "visits": 2025,
  "imageUrl": "https://cdn.amcharts.com/lib/4/images/flag_us.svg"
}, {
  "country": "China",
  "visits": 1882,
  "imageUrl": "https://cdn.amcharts.com/lib/4/images/flag_cn.svg"
}, {
  "country": "Japan",
  "visits": 1809,
  "imageUrl": "https://cdn.amcharts.com/lib/4/images/flag_jp.svg"
}, {
  "country": "Germany",
  "visits": 1322,
  "imageUrl": "https://cdn.amcharts.com/lib/4/images/flag_de.svg"
}, {
  "country": "UK",
  "visits": 1122,
  "imageUrl": "https://cdn.amcharts.com/lib/4/images/flag_gb.svg"
}, {
  "country": "France",
  "visits": 1114,
  "imageUrl": "https://cdn.amcharts.com/lib/4/images/flag_fr.svg"
}, {
  "country": "India",
  "visits": 984,
  "imageUrl": "https://cdn.amcharts.com/lib/4/images/flag_in.svg"
}, {
  "country": "Spain",
  "visits": 711,
  "imageUrl": "https://cdn.amcharts.com/lib/4/images/flag_es.svg"
}, {
  "country": "Netherlands",
  "visits": 665,
  "imageUrl": "https://cdn.amcharts.com/lib/4/images/flag_nl.svg"
}, {
  "country": "Russia",
  "visits": 580,
  "imageUrl": "https://cdn.amcharts.com/lib/4/images/flag_ru.svg"
}, {
  "country": "South Korea",
  "visits": 443,
  "imageUrl": "https://cdn.amcharts.com/lib/4/images/flag_kr.svg"
}, {
  "country": "Canada",
  "visits": 441,
  "imageUrl": "https://cdn.amcharts.com/lib/4/images/flag_ca.svg"
}, {
  "country": "Brazil",
  "visits": 395,
  "imageUrl": "https://cdn.amcharts.com/lib/4/images/flag_br.svg"
}];

// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 30;

categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {
  if (target.dataItem && target.dataItem.index & 2 == 2) {
    return dy + 25;
  }
  return dy;
});

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

// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "visits";
series.dataFields.categoryX = "country";
series.name = "Visits";
series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
series.columns.template.fillOpacity = .8;

var columnTemplate = series.columns.template;
columnTemplate.strokeWidth = 2;
columnTemplate.strokeOpacity = 1;

// --------------------------
// 新增：悬停显示的图片和数值标签逻辑
// --------------------------
// 为每个柱子创建容器，包含数值标签和图片
var columnContainer = series.columns.template.createChild(am4core.Container);
columnContainer.layout = "vertical";
columnContainer.horizontalCenter = "middle";
columnContainer.verticalCenter = "top";
columnContainer.y = -10; // 调整容器相对柱顶的偏移量
columnContainer.visible = false; // 默认隐藏

// 创建数值标签
var valueLabel = columnContainer.createChild(am4core.Label);
valueLabel.text = "{valueY}";
valueLabel.fontSize = 14;
valueLabel.fontWeight = "bold";
valueLabel.horizontalCenter = "middle";
valueLabel.marginBottom = 5; // 标签与图片的间距

// 创建图片元素
var flagImage = columnContainer.createChild(am4core.Image);
flagImage.width = 30;
flagImage.height = 20;
flagImage.horizontalCenter = "middle";
flagImage.href = "{imageUrl}"; // 绑定数据中的图片地址

// 监听悬停进入事件，显示容器
columnTemplate.events.on("over", function(event) {
  event.target.children.getIndex(0).visible = true;
});

// 监听悬停离开事件，隐藏容器
columnTemplate.events.on("out", function(event) {
  event.target.children.getIndex(0).visible = false;
});

CSS 代码 #

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 500px;
}

HTML 代码 #

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

关键实现说明 #

1. 数据扩展：在原有数据中新增imageUrl字段，用于绑定每个柱子对应的图片地址。
2. 容器与元素创建：为每个柱子生成垂直布局的容器，内部包含数值标签和图片，默认状态为隐藏。
3. 悬停事件控制：通过over和out事件触发容器的显示/隐藏状态切换。
4. 数据绑定：利用AmCharts模板语法，将标签文本、图片地址与对应柱子的数据字段自动关联，确保内容匹配。

内容的提问来源于stack exchange，提问作者Faizan Naeem