0

为了尝试解决这个问题，我开始考虑为 flot 编写一个插件来做我需要的事情。它看起来令人惊讶地直截了当，但我遇到了一个小障碍。我首先使用 draw hook 来绘制我的轴（注意：我知道这段代码需要一些错误检查以确保原点不在图表之外）

 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();
}

这很有效，有两个小障碍。第一个也是最重要的是，由于某种原因，它使我的数据系列的最后一点改变了颜色！看这里：

在此处输入图像描述

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

第二个问题是，只有在 flot 绘制了其他所有内容（包括数据点）之后才调用此代码，这意味着我的线条出现在点的顶部而不是它们的下方。这只是对于那些非常靠近垂直轴的两个点的问题。查看 flot 文档，它提到了一个 drawBackground 钩子，但这似乎并不存在。我尝试使用它，但它抱怨 drawBackground 为空。所以发生了什么事？有没有更好的地方可以钩住并画出我的斧头？我想在 flot 计算出绘图区域的大小之后绘制第一组数据点之前绘制。

4

1 回答 1

1

当前网站 API 文档中的内容与最新发布的版本 (0.7) 不匹配。为了使用这个backgroundDraw钩子，你需要一个更新版本的 flot，直接来自他们的github 仓库。最新版本很好，但是在此提交之后的任何内容都可以使用。

于 2012-09-18T15:58:29.743 回答