在 p:chart 中编辑数据提示位置

Question

我正在使用 PrimeFaces 6.0，我想在我的条形图上显示工具提示。我试过像 this example and it worked fine. The problem is, I might use long text for the tooltip and the most left bar won't show the full text like this.

这样的 datatipeditor

我尝试用这段代码移动位置。

function toolTip(str, seriesIndex, pointIndex, plot){
     var val = plot.data[seriesIndex][pointIndex];
     return "<div style='position:relative; left:80px; bottom:15px;'>1aaaaaaaaaaaaaaaaaaaa: " + 
        (pointIndex +1) + "<br/>2bbbbbbbbbbbbbbbbbb: " + val + "</div>";
}

文本按照我设计的移动了，但是方框还在like this。

我正在考虑使用扩展器，但我在文档页面上迷失了关于使用哪个属性以及如何将 bean 中的数据作为工具提示文本传递的信息。

知道如何将框和文本移动到我用 datatipeditor 设计的位置吗？

Answer 1

豆子内部：

CartesianChartModel barModel = new BarChartModel();
barModel.setExtender("myExtender");

然后在我的 js 中使用荧光笔中的 tooltipContentEditor，代码如下：

function myExtender(){
     this.cfg.highlighter = {
          tooltipContentEditor: function (str, seriesIndex, pointIndex, plot) {
             var val = plot.data[seriesIndex][pointIndex];
             return "this value is: " + val + "<br/>this is a looooooooooooong text";
          },
     show: true, 
     useAxesFormatters: false,
     tooltipLocation: 'n'
     };
}

这是result。

在 p:chart 中编辑数据提示位置

Edit datatip position in p:chart

charts

primefaces

tooltip

jqplot