流线图-显示元数据悬停

Flot Chart - Display Meta Data on Hover

本文关键字：元数据 悬停 显示      更新时间：2023-09-26

我有一个图表，Y轴上显示0-100%，x轴上显示四分之一。源数据包括:

{ 
 date: '2015 Q1',
 numerator: 55,
 denominator: 105,
 percent:52 
}

作图时，将系列数据指定为[52, '2015 Q1']，并在图上正确显示。但是，当我将鼠标悬停在数据点上时，我希望显示原始分子和分母以及百分比。

是否有任何方法可以让我在系列数据中包含额外的元数据?

**注意，在这个例子中，我简化了四分之一逻辑。它实际上是以毫秒为单位指定的，按照flot规格**

首先，您的示例数据应该是['2015 Q1', 52], x值优先。

其次，您可以使用具有两个以上数据点值的数组，例如['2015 Q1', 52, 55, 105]，然后在工具提示中使用第三和第四个值(flot在绘制线图和点图时将忽略它们)。

工具提示示例代码:

function bindHover() {
    $(document).on('plothover', '#chart', function (event, pos, item) {
        if (item) {
            if (prevPoint != item.dataIndex) {
                prevPoint = item.dataIndex;
                $('#tooltip').remove();
                var tooltipString = item.series.name + ': ' + item.datapoint[0];
                tooltipString += '/' + item.datapoint[1];
                tooltipString += '<br/>' + item.series.data[item.dataIndex][2];
                tooltipString += '/' + item.series.data[item.dataIndex][3];
                showTooltip(item.pageX, item.pageY, tooltipString);
            }
        }
        else {
            $('#tooltip').remove();
            prevPoint = null;
        }
    });
}
相关文章：