如何在Flot Chart的Tooltip中正确显示第三个自定义数据值？

问题原因 #

Flot 默认仅将数据点数组的前两个元素解析为x、y坐标并存入item.datapoint；第三个及后续的额外数据不会被自动纳入该对象，因此直接调用item.datapoint[2]会返回undefined。

解决方案 #

要获取数据点中的第三个值，需从原始数据集合中提取，而非依赖item.datapoint。以下是具体实现代码：

数组格式数据的处理 #

如果你的数据是数组格式（如你提供的[[1678780801000,137.00,'test'], ...]），在hover事件中通过item.series.data[item.dataIndex]获取完整的原始数据点：

$("#your-chart-container").bind("plothover", function (event, pos, item) {
    if (item) {
        // 获取当前hover到的原始数据点
        const rawPoint = item.series.data[item.dataIndex];
        const yValue = rawPoint[1].toFixed(2);
        const thirdValue = rawPoint[2]; // 这里就能拿到你需要的第三个值
        
        // 渲染Tooltip
        $("#tooltip").html(`
            时间: ${new Date(rawPoint[0])}<br>
            数值: ${yValue}<br>
            额外信息: ${thirdValue}
        `).css({top: pos.pageY + 10, left: pos.pageX + 10}).show();
    } else {
        $("#tooltip").hide();
    }
});

对象格式数据的优化写法 #

如果将数据改为对象格式，可读性会更强，也更易维护：

// 构造数据
var d1 = [
    {x: 1678780801000, y: 137.00, desc: 'test'},
    // 更多数据点...
];

// hover事件处理
$("#your-chart-container").bind("plothover", function (event, pos, item) {
    if (item) {
        const rawPoint = item.series.data[item.dataIndex];
        const yValue = rawPoint.y.toFixed(2);
        const thirdValue = rawPoint.desc;
        
        $("#tooltip").html(`
            时间: ${new Date(rawPoint.x)}<br>
            数值: ${yValue}<br>
            额外信息: ${thirdValue}
        `).css({top: pos.pageY + 10, left: pos.pageX + 10}).show();
    } else {
        $("#tooltip").hide();
    }
});

内容的提问来源于stack exchange，提问作者Thomas B