Question

我正在使用FLOT来显示图表。

要显示tootip，我正在使用https://github.com/krzysu/flot.tooltip。

现在我想自定义工具提示的内容，所以我使用回调来设置工具提示的内容。代码段：

tooltip: true,
  tooltipOpts: {
    content: function(label, xval, yval, flotItem){
      var xAxis = plot.getXAxes();
      return xval;
    },
    defaultTheme: false
}

但是它给了我错误

caught TypeError: Object function (label, xval, yval, flotItem){
            var xAxis = plot.getXAxes();
            return xval;
           } has no method 'replace'

有人可以帮助我吗？

提前致谢。

Answer 1

文件说明：

如果您需要更多地控制工具提示的生成方式，您可以传递一个回调函数（label，xval，yval，flotItem）必须返回一个字符串，其格式为描述。

xval是工具提示所在的数字 x轴值。 它不是字符串。它失败的replace方法是标准的string.replace：

 > "".replace
 function replace() { [native code] }

Answer 2

我没有使用flot工具提示。有更简单的方法来显示工具提示并自定义它。看看这个小提琴手：

http://jsfiddle.net/Margo/yKG7X/5/

$（＆＃34;＃placeholder＆＃34;）。bind（＆＃34; plothover＆＃34;，function（event，pos，item）{   if（item）{
                  $（＆＃34;＃工具提示＆＃34）除去（）;
                var x = item.datapoint[0],
                    y = item.datapoint[1];
                showTooltip(item.pageX, item.pageY, x + " / " + y );
                }
});

function showTooltip(x, y, contents) {
    $('<div id="tooltip">' + contents + '</div>').css({
        position: 'absolute',
        display: 'none',
        top: y + 5,
        left: x + 5,
        border: '1px solid #fdd',
        padding: '2px',
        'background-color': '#fee',
        opacity: 0.80
    }).appendTo("body").fadeIn(200).fadeOut(6000);
}

希望有所帮助:)

在FLOT图中自定义工具提示

2 个答案: