以下是一个使用AmCharts库显示/隐藏自定义图像标记的示例代码:
首先,确保您已经引入了AmCharts库的相关文件,然后创建一个HTML元素用于显示图表:
然后,在JavaScript中使用以下代码创建和配置图表,并添加自定义图像标记:
// 创建图表对象
var chart = am4core.create("chartdiv", am4charts.XYChart);
// 配置图表属性
chart.paddingRight = 20;
// 创建分类轴
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 30;
// 创建值轴
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// 创建柱状图系列
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = "category";
series.dataFields.valueY = "value";
series.columns.template.tooltipText = "{valueY.value}";
series.columns.template.fillOpacity = .8;
// 创建自定义图像标记
var image = new am4core.Image();
image.horizontalCenter = "middle";
image.width = 20;
image.height = 20;
image.verticalCenter = "middle";
image.adapter.add("href", function(href, target) {
var dataItem = target.dataItem;
// 根据数据项的条件显示/隐藏图像标记
if (dataItem && dataItem.dataContext && dataItem.dataContext.showImage) {
return "path/to/image.png"; // 图像路径
}
return ""; // 默认情况下隐藏图像标记
});
// 将图像标记添加到系列的列模板中
series.columns.template.addChild(image);
// 添加示例数据
chart.data = [{
"category": "A",
"value": 100,
"showImage": true // 显示图像标记
}, {
"category": "B",
"value": 200,
"showImage": false // 隐藏图像标记
}, {
"category": "C",
"value": 150,
"showImage": true // 显示图像标记
}];
上述代码将创建一个柱状图,其中根据数据项的条件显示或隐藏自定义图像标记。您可以根据实际需求修改图表的配置和数据。