如何在flot中的两条线之间遮蔽区域?

时间:2010-06-01 20:57:25

标签: php javascript graph flot

我在使用Flot创建图表方面取得了很大的成功。但是,我似乎无法弄清楚如何使用库在两行之间的区域中进行着色。我的目标是能够创建阴影区域,如下所示:

Graph1 http://hizkiya.com/images/1.jpg Graph2 http://hizkiya.com/images/2.jpg

我找到了this插件,但它似乎只能遮蔽一行的一系列值,如here所示。

更新

我终于得到了阴影工作,虽然它有点hacky。我正在录制这里有用的内容,以便其他人可以受益。

为了在两行之间进行着色,必须合并两个数据集,其中较高的数据集反向排序。确保数据集的第一个和最后一个点是相同的,否则你可能会得到奇怪的结果。

因此,例如,如果我将lines: { fill: true}设置为data: [[0,8],[100,8],[100,8],[90,7],[85,6], [10,6], [0,8]],我最终会得到一个填充区域。

1 个答案:

答案 0 :(得分:4)

有一个{lines: { fill: true} }选项用于填充,并在this question中查看mailing list archive,了解如何让它在行之间工作。

请注意,他们的邮件列表存档中还有其他相关帖子;看看它。