如何在AmChart (v4)中自定义带动态变量名的提示框

情况1：JavaFX XYChart #

核心思路是将原始数据绑定到每个图表数据点的userData属性，然后根据系列名称动态拼接Lot ID字段名，从原始数据中提取对应值。

步骤1：定义数据模型类（或使用Map存储原始数据） #

// 对应你的JSON数据结构的POJO类
class TempRecord {
    private String sumTime;
    private int TEMP_REAR;
    private String TEMP_REAR_lotId;
    private int TEMP_CR;
    private String TEMP_CR_lotId;

    // 自行补充构造器、Getter方法
}

步骤2：创建LineSeries并绑定原始数据 #

// 假设已将JSON解析为List<TempRecord> tempRecords
LineSeries<String, Number> tempRearSeries = new LineSeries<>();
tempRearSeries.setName("TEMP_REAR");

LineSeries<String, Number> tempCrSeries = new LineSeries<>();
tempCrSeries.setName("TEMP_CR");

// 给每个系列添加数据点，同时将原始记录存入userData
for (TempRecord record : tempRecords) {
    // TEMP_REAR系列数据点
    XYChart.Data<String, Number> rearData = new XYChart.Data<>(record.getSumTime(), record.getTEMP_REAR());
    rearData.setUserData(record);
    tempRearSeries.getData().add(rearData);

    // TEMP_CR系列数据点
    XYChart.Data<String, Number> crData = new XYChart.Data<>(record.getSumTime(), record.getTEMP_CR());
    crData.setUserData(record);
    tempCrSeries.getData().add(crData);
}

// 将系列添加到XYChart
XYChart<String, Number> chart = new LineChart<>(new CategoryAxis(), new NumberAxis());
chart.getData().addAll(tempRearSeries, tempCrSeries);

步骤3：自定义提示框（Tooltip） #

编写通用方法处理所有系列的提示框，根据系列名动态获取Lot ID：

private void setupCustomTooltip(LineSeries<String, Number> series) {
    String seriesName = series.getName();
    String lotIdField = seriesName + "_lotId";

    for (XYChart.Data<String, Number> dataPoint : series.getData()) {
        TempRecord rawRecord = (TempRecord) dataPoint.getUserData();
        String sumTime = rawRecord.getSumTime();
        Number value = dataPoint.getYValue();
        String lotId;

        // 根据系列名匹配对应Lot ID字段
        switch (seriesName) {
            case "TEMP_REAR":
                lotId = rawRecord.getTEMP_REAR_lotId();
                break;
            case "TEMP_CR":
                lotId = rawRecord.getTEMP_CR_lotId();
                break;
            default:
                lotId = "Unknown";
        }

        // 构建提示框文本
        String tooltipContent = String.format("Name: %s\nSum Time: %s\nSum Value: %d\nLot ID: %s",
                seriesName, sumTime, value.intValue(), lotId);

        Tooltip tooltip = new Tooltip(tooltipContent);
        Tooltip.install(dataPoint.getNode(), tooltip);
    }
}

// 给两个系列应用自定义提示框
setupCustomTooltip(tempRearSeries);
setupCustomTooltip(tempCrSeries);

如果需要支持后续新增系列，可用反射替代switch实现通用逻辑：

private String getLotIdByReflection(TempRecord record, String fieldName) {
    try {
        String getterName = "get" + fieldName.substring(0, 1).toUpperCase() + fieldName.substring(1);
        Method getter = TempRecord.class.getMethod(getterName);
        return (String) getter.invoke(record);
    } catch (Exception e) {
        e.printStackTrace();
        return "Error";
    }
}

在setupCustomTooltip中替换switch部分：

String lotId = getLotIdByReflection(rawRecord, lotIdField);

情况2：ECharts（前端XY轴折线图） #

核心是在系列数据中携带Lot ID字段，然后在提示框格式化函数中根据系列名动态提取对应值。

配置示例 #

// 假设原始JSON已解析为tempData数组
const option = {
    tooltip: {
        formatter: function(params) {
            const seriesName = params.seriesName;
            // 动态拼接Lot ID字段名
            const lotIdField = `${seriesName}_lotId`;
            const lotId = params.data[lotIdField];
            
            return `Name: ${seriesName}\nSum Time: ${params.name}\nSum Value: ${params.value}\nLot ID: ${lotId}`;
        }
    },
    xAxis: {
        type: 'category',
        data: tempData.map(item => item.sumTime)
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'TEMP_REAR',
            type: 'line',
            // 每个数据项携带对应Lot ID
            data: tempData.map(item => ({
                value: item.TEMP_REAR,
                TEMP_REAR_lotId: item.TEMP_REAR_lotId
            }))
        },
        {
            name: 'TEMP_CR',
            type: 'line',
            data: tempData.map(item => ({
                value: item.TEMP_CR,
                TEMP_CR_lotId: item.TEMP_CR_lotId
            }))
        }
    ]
};

// 初始化图表
const myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

内容的提问来源于stack exchange，提问作者Sao Bui Van