Flot、jsrender&；幻影：条形标签轴

我在jsreport.net中设置了一个基于jsrender的flot图表，但目前在多页图表的y轴上失败了。正如您在第二幅图像上看到的，y轴与条形图不匹配

更新：这里是操场链接：：

第一页：

第二页：

这是当前的源代码片段

        var seriesCount = 1; // current data series identifier

        // drawing series hook
        dsHook = function(plot, canvascontext, series){
            for (var i = 0; i < series.data.length; i++){

                // get relative position of plot
                var offset = plot.offset();

                // get data point
                var dP = series.data[i];

               var pos = plot.p2c({x: dP[0], y: dP[1]});

               var barWidth = plot.p2c({x: dP[0] + series.bars.barWidth, y: dP[1]}).left - pos.left;

               var posCorr; 
               // set horizontal position correction

               switch(seriesCount) {
                   case 1: posCorr = -72; break;
                   case 2: posCorr = -23; break;
                   case 3: posCorr = 24; break;
                   case 4: posCorr = -50; break;
                   case 5: posCorr = 2; break;
                } 

                pos.left += offset.left + posCorr; 
                pos.top += offset.top - 30;

                numFormatted = number_format(dP[1], 0, '', '\'');

                var aDiv = $('<div></div>').css({'width':barWidth, 'background-color':'white','color':'black','font-size':'12px','text-align':'center','position':'absolute','left': pos.left,'top':pos.top}).text(numFormatted).appendTo("body");

            }
            seriesCount++;
        }

var seriescont=1；//当前数据系列标识符
//拉丝系列吊钩
dsHook=函数（绘图、画布上下文、系列）{
对于（变量i=0；i

似乎

plot.offset（）.top

在

dsHook

中计算错误，因为每隔一页添加一个页眉/页边空白

第一个“解决方案”是修改您的计算以反映这一点：

pos.top += offset.top - 30 + ({{:ID}}-1)*20;

第二个“解决方案”是将固定大小的空头添加到幻象配置中，目前还没有解释

---

我希望用更好的解释/解决方案更新此内容

您确定这不是css问题吗？对于任何flot生成的元素，您的容器的大小可能不合适；高度：300px；位置：相对位置；保证金：50px自动；您是否可以创建一个JSFIDLE来查看那里发生了什么？JSFIDLE没有成功，但我直接用jsreport.net创建了一个游乐场：y轴与横杆匹配，只有横杆上方的标签位于错误的位置。如果您将渲染器更改为html，则标签位于正确的位置，因此问题似乎出在phantom-pdf上。确实非常奇怪，非常感谢您的两个解决方案，这两个解决方案都非常有效（完美）。知道为什么会是这样会很有趣。