Flot Chart - 在悬停时显示元数据

Question

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

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

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

我有什么办法可以在系列数据中包含额外的元数据吗？

** 注意这个例子我正在简化季度逻辑。根据 flot 规范，它实际上以毫秒为单位指定 **

Answer 1

首先，您的示例数据应该是 ['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;
        }
    });
}

Flot Chart - 在悬停时显示元数据

Flot Chart - Display Meta Data on Hover

javascript

metadata

flot