不错,jsrender & phantom:条形标签轴
Flot, jsrender & phantom: Bar label axis
我使用 jsreport.net 设置了一个基于 jsrender 的浮动图表,目前在多页图表的 y 轴上失败。正如您在第二张图片中看到的,y 轴与条形不正确匹配。
更新:这里是游乐场 link::https://playground.jsreport.net/#playground/WJmSGjkB5/2
第一页:
第二页:
这是当前的源代码片段
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++;
}
plot.offset().top
似乎在 dsHook
中被错误地计算了,因为 space 为 header/margin 添加了每隔一页。
第一个 "solution" 是修改您的计算以反映这一点:
pos.top += offset.top - 30 + ({{:ID}}-1)*20;
https://playground.jsreport.net/#playground/WJmSGjkB5/5
第二个"solution"是在幻象配置中添加固定大小的空头,还没有解释
https://playground.jsreport.net/#playground/WJmSGjkB5/4
我希望我能更新得更好explanation/solution
我使用 jsreport.net 设置了一个基于 jsrender 的浮动图表,目前在多页图表的 y 轴上失败。正如您在第二张图片中看到的,y 轴与条形不正确匹配。
更新:这里是游乐场 link::https://playground.jsreport.net/#playground/WJmSGjkB5/2
第一页:
第二页:
这是当前的源代码片段
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++;
}
plot.offset().top
似乎在 dsHook
中被错误地计算了,因为 space 为 header/margin 添加了每隔一页。
第一个 "solution" 是修改您的计算以反映这一点:
pos.top += offset.top - 30 + ({{:ID}}-1)*20;
https://playground.jsreport.net/#playground/WJmSGjkB5/5
第二个"solution"是在幻象配置中添加固定大小的空头,还没有解释
https://playground.jsreport.net/#playground/WJmSGjkB5/4
我希望我能更新得更好explanation/solution