drawBackground挂钩在哪里?还是为什么我的最后一点是错误的颜色 [英] Where did the drawBackground hook go? Or why is my last point the wrong color

问题描述

要尝试解决这个问题，我开始希望为flot编写插件来完成我需要的工作.它看起来很直截了当，但是我遇到了一个小障碍.我首先使用了绘图钩来绘制轴(注意:我知道这段代码需要进行一些错误检查，以确保原点不在图表中)

To try and solve this problem, I started looking into writing a plugin for flot to do what I needed. It looked surprisingly straight-forward, but I have run into a minor snag. I First used the draw hook to draw my axis (note: I'm aware this code needs some error checking to make sure the origin isn't off the chart)

 function draw(plot, ctx) {
    var offset = plot.getPlotOffset();
    var origin = plot.pointOffset({ x: 0, y: 0 });
    ctx.moveTo(offset.left, origin.top);
    ctx.lineTo(plot.width() + offset.left, origin.top);
    ctx.stroke();
    ctx.moveTo(origin.left, offset.top);
    ctx.lineTo(origin.left, plot.height() + offset.top);
    ctx.stroke();
}

这可行，但有2个小障碍.第一个也是最重要的一点是，由于某种原因，它使我的数据系列的最后一点改变了颜色！看到这里:

And this works, with 2 small snags. The first and most important is that for some reason it makes the very last point of my data series change color! See here:

右上角的点已变成黑色.通过单步执行代码，我可以观察到只有在绘制轴时才会发生这种情况.在调用我的绘画代码之前，关键是正确的颜色.因此，我认为这与第一个笔画"上的图有关.由于某种原因，它似乎将黑色应用于最后一个点.关于如何解决此问题的任何想法?

The point in the upper right-hand corner has turned black. By stepping through the code I can observe that this only happens when the axes are drawn. Before my draw code is called, the point is the correct color. So I think it has something to do with the drawing on the first "stroke". For some reason it seems to then apply the black color to the last point. Any idea on how to fix this?

第二个问题是，仅在flot绘制了所有其他内容(包括数据点)之后才调用此代码，这意味着我的线出现在点的顶部而不是在它们的下方.对于这两个非常接近垂直轴的点，这只是一个问题.在flot文档中，它提到了drawBackground钩子，但这似乎并不存在.我尝试使用它，但它抱怨drawBackground为空.所以发生了什么事?还有一个更好的地方可以钩住并画出我的坐标轴吗?我想在flot计算出绘图区域的大小之后并绘制第一个数据点系列之前进行绘制.

The second problem is that this code is called only after flot has draw everything else (including the data points) which means that my lines appear on top of points instead of underneath them. This is only a problem for those two points that are very close to the vertical axis. Looking at the flot documentation, it mentions a drawBackground hook, but this doesn't seem to actually exist. I tried using it and it complained the drawBackground was null. So what happened? And is there a better place to hook into and draw my axes? I want to draw after flot has worked out the size of the plot area and before it draws the first series of data points.

推荐答案

网站上当前提供的API文档与最新发布的版本(0.7)不匹配.为了使用backgroundDraw挂钩，您需要直接从其 github存储库.最新版本是可以的，但是此提交之后的任何操作都是可行的.

What's currently on the website API documentation does not match the newest released version (0.7). In order to use the backgroundDraw hook, you'll need a newer version of flot, directly from their github repository. The newest version is fine, but anything after this commit would be workable.

这篇关于drawBackground挂钩在哪里?还是为什么我的最后一点是错误的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！