Flot, jsrender & phantom: 条形标签轴答案

【问题标题】：Flot, jsrender & phantom: Bar label axisFlot, jsrender & phantom: 条形标签轴
【发布时间】：2015-01-27 09:42:30
【问题描述】：

我使用 jsreport.net 设置了一个基于 jsrender 的浮动图表，目前在多页图表的 y 轴上失败。正如您在第二张图片中看到的那样，y 轴与条形不正确匹配。

更新：这里是操场链接：：https://playground.jsreport.net/#playground/WJmSGjkB5/2

首页：

第二页：

这里是当前源代码sn-p

        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++;
        }

【问题讨论】：

你确定不是css问题吗？您的容器可能不适合任何 flot 生成的元素。
css div 有以下属性： width: 700px;高度：300px；位置：相对；边距：50px 自动；
您是否可以创建一个 JSFiddle 来查看那里发生了什么？ jsfiddle.net
jsfiddle 没用，但是我直接用 jsreport.net 创建了一个 Playground：playground.jsreport.net/#playground/WJmSGjkB5/2
y 轴与条形匹配，只有条形上方的标签位置错误。如果将渲染器更改为 html，则标签位于正确的位置，因此问题似乎出在 phantom-pdf 上。

标签： flot jsrender jsreport

【解决方案1】：

似乎plot.offset().top 在dsHook 中计算错误，因为每隔一页添加一个页眉/边距空间。

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

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

https://playground.jsreport.net/#playground/WJmSGjkB5/5

第二个“解决方案”是在幻像配置中添加固定大小的空标题，还没有解释

https://playground.jsreport.net/#playground/WJmSGjkB5/4

我希望我会用更好的解释/解决方案来更新它

【讨论】：

确实很奇怪，非常感谢您提供的两个解决方案，它们都有效（完美）。了解为什么会这样会很有趣。