AmCharts作为常用的数据可视化库，在处理结构化数据时，默认工具提示只会展示基础数据字段，无法适配复杂的业务展示需求。开发者可以通过配置工具提示的相关属性，实现显示内容的精确控制。
工具提示基础配置
AmCharts的工具提示通过tooltip属性进行全局或系列级别的配置，对于结构化数据，首先需要明确需要展示的字段和对应的展示逻辑。
基础字段映射
如果是简单的字段展示，可以直接通过tooltipText属性指定要显示的字段，支持使用占位符引用数据中的属性。
// 基础柱状图配置示例
const chart = am5xy.create("chartdiv", am5xy.XYChart.new(root, {
panX: false,
panY: false,
wheelX: "panX",
wheelY: "zoomX"
}));
// 添加数据
chart.data = [
{ category: "产品A", sales: 1200, profit: 300, region: "华北" },
{ category: "产品B", sales: 980, profit: 220, region: "华东" },
{ category: "产品C", sales: 1500, profit: 450, region: "华南" }
];
// 配置X轴
const xAxis = chart.xAxes.push(
am5xy.CategoryAxis.new(root, {
categoryField: "category",
renderer: am5xy.AxisRendererX.new(root, {})
})
);
xAxis.data.setAll(chart.data);
// 配置Y轴
const yAxis = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {})
})
);
// 添加柱状图系列
const series = chart.series.push(
am5xy.ColumnSeries.new(root, {
xAxis: xAxis,
yAxis: yAxis,
valueYField: "sales",
categoryXField: "category",
// 基础工具提示配置，展示类别和销量
tooltipText: "类别: {category}n销量: {sales}"
})
);
series.data.setAll(chart.data);
自定义工具提示内容渲染
当需要处理更复杂的结构化数据展示逻辑时，比如格式化数值、拼接多个字段、添加条件判断，可以使用tooltipHTML或者adapter方法自定义渲染逻辑。
使用tooltipHTML自定义HTML内容
如果需要自定义工具提示的HTML结构，可以使用tooltipHTML属性，支持直接编写HTML片段，同时可以引用数据字段。
// 系列配置中添加自定义HTML工具提示
const series = chart.series.push(
am5xy.ColumnSeries.new(root, {
xAxis: xAxis,
yAxis: yAxis,
valueYField: "sales",
categoryXField: "category",
// 自定义HTML工具提示，展示更多结构化数据字段
tooltipHTML: `
<div style="padding: 8px; min-width: 180px;">
<div style="font-weight: bold; margin-bottom: 4px;">{category}</div>
<div>所属区域: {region}</div>
<div>销量: {sales} 件</div>
<div>利润: {profit} 元</div>
<div>利润率: {profitPercent}%</div>
</div>
`
})
);
// 如果需要计算衍生字段，可以先处理数据
chart.data = chart.data.map(item => ({
...item,
profitPercent: ((item.profit / item.sales) * 100).toFixed(2)
}));
使用adapter动态处理内容
如果需要根据数据内容动态调整工具提示的显示内容，比如不同数据范围显示不同的提示信息，可以使用adapter对工具提示的文本或HTML进行修改。
// 使用adapter动态调整工具提示内容
series.set("tooltipHTML", `
<div style="padding: 8px; min-width: 180px;">
<div style="font-weight: bold; margin-bottom: 4px;">{category}</div>
<div>所属区域: {region}</div>
<div>销量: {sales} 件</div>
<div>利润: {profit} 元</div>
</div>
`);
// 添加adapter处理工具提示内容
series.adapters.add("tooltipHTML", (html, target) => {
const dataItem = target.dataItem;
if (dataItem) {
const data = dataItem.dataContext;
// 销量超过1000时添加高亮提示
if (data.sales > 1000) {
return html.replace(
`<div style="font-weight: bold; margin-bottom: 4px;">${data.category}</div>`,
`<div style="font-weight: bold; margin-bottom: 4px; color: #ff4d4f;">${data.category} (热销)</div>`
);
}
}
return html;
});
工具提示样式定制
除了内容控制，还可以调整工具提示的整体样式，包括背景色、边框、字体大小等，使其和整体页面风格保持一致。
// 配置工具提示的全局样式
const tooltip = am5.Tooltip.new(root, {
getFillFromSprite: false,
background: am5.Rectangle.new(root, {
fill: am5.color("#ffffff"),
stroke: am5.color("#e8e8e8"),
strokeWidth: 1
}),
label: am5.Label.new(root, {
fontSize: 14,
fill: am5.color("#333333"),
paddingLeft: 10,
paddingRight: 10,
paddingTop: 8,
paddingBottom: 8
})
});
// 将自定义工具提示应用到系列
series.set("tooltip", tooltip);
常见问题与注意事项
- 使用
tooltipHTML时，内部的HTML标签需要正确转义，避免被AmCharts解析为配置标签。 - 如果数据字段包含特殊字符，需要在展示前做转义处理，避免破坏HTML结构。
- 工具提示的内容不要过于复杂，避免影响图表的渲染性能和交互流畅度。
- 不同系列的AmCharts图表工具提示配置方式略有差异，需要根据具体图表类型调整对应的配置属性。
定制AmCharts工具提示的核心是结合数据结构，选择合适的配置方式，简单场景使用占位符配置，复杂场景使用HTML自定义或者adapter动态调整，即可实现精确的内容控制。