Javascript 使用TickRotor插件在Flotchart中绘制的额外线
我正在尝试使用FlotChart创建一个堆叠条形图。 我的挑战是创建最多5层的多个x轴标签。 因此,我尝试使用TickRotor插件(最初是因为我想垂直旋转标签) 现在,我想在TickRotor中画一些线并调整一些函数。然而,在我的图表中有一条奇怪的线。你能帮我一下发生了什么事吗 这里是plot.hooks.draw.push(函数(plot,ctx)的“else”部分:Javascript 使用TickRotor插件在Flotchart中绘制的额外线,javascript,charts,flot,rotor,Javascript,Charts,Flot,Rotor,我正在尝试使用FlotChart创建一个堆叠条形图。 我的挑战是创建最多5层的多个x轴标签。 因此,我尝试使用TickRotor插件(最初是因为我想垂直旋转标签) 现在,我想在TickRotor中画一些线并调整一些函数。然而,在我的图表中有一条奇怪的线。你能帮我一下发生了什么事吗 这里是plot.hooks.draw.push(函数(plot,ctx)的“else”部分: if(ticks.length==0){ 返回; } xaxis=plot.getAxes().xaxis; var-box
if(ticks.length==0){
返回;
}
xaxis=plot.getAxes().xaxis;
var-box=xaxis.box;
变量记号、标签、xoffset、yoffset;
var showWeek=false;
对于(变量i=0;iif (ticks.length == 0) {
return;
}
xaxis = plot.getAxes().xaxis;
var box = xaxis.box;
var tick, label, xoffset, yoffset;
var showWeek = false;
for (var i = 0; i < ticks.length; i++) {
tick = ticks[i];
if (!tick.label) {
continue;
}
ctx.save();
ctx.font = font;
if (rotateTicks <= 90) {
// Center such that the top of the label is at the center of the tick.
xoffset = -Math.ceil(Math.cos(radsAboveHoriz) * tick.height) - 10;
yoffset = Math.ceil(Math.sin(radsAboveHoriz) * tick.height) - 10;
ctx.translate(Math.round(plot.getPlotOffset().left + xaxis.p2c(tick.v)) + xoffset,
box.top + box.padding + plot.getOptions().grid.labelMargin + yoffset);
ctx.rotate(rotateTicksRads);
} else {
// We want the text to facing up, so we have to
// rotate counterclockwise, which means the label
// has to *end* at the center of the tick.
xoffset = Math.ceil(Math.cos(radsAboveHoriz) * tick.height)
- Math.ceil(Math.cos(radsAboveHoriz) * tick.width);
yoffset = Math.ceil(Math.sin(radsAboveHoriz) * tick.width)
+ Math.ceil(Math.sin(radsAboveHoriz) * tick.height);
ctx.translate(Math.round(plot.getPlotOffset().left + xaxis.p2c(tick.v) + xoffset),
box.top + box.padding + plot.getOptions().grid.labelMargin + yoffset);
ctx.rotate(-radsAboveHoriz);
}
var ticksMe = tick.label.split(" ");
// draw labels
ctx.fillText(ticksMe[0], 0, 0);
if(showWeek){
ctx.fillText(ticksMe[1], xoffset, yoffset * 2);
showWeek = false;
}
else{
showWeek = true;
ctx.moveTo(-4,-10);
ctx.lineTo(-4,(yoffset * 2));
ctx.stroke();
}
ctx.restore();
}