jquery - flot 中的虚线刻度线/网格线

Question

我对这个 flot API 很陌生。我想要虚线网格线/刻度线而不是实线 X 轴和 Y 轴。谁能帮我这个？？

提前致谢！

Answer 1

通过修改库，我能够为网格标记生成虚线。我目前正在使用 Flot 版本 0.8.0

首先，我在网格（大约 400 行）下添加了一个新属性，就在标记线宽度的下方：

markingsStyle: 'dashed'

由于 Flot 使用画布呈现图表，因此我使用来自 David Owens的代码为画布添加了 dashedLineTo() 扩展。我在 Flot 代码顶部的颜色解析器插件之后添加了它，并归功于 David。dashedLineTo() 具有以下参数：

dashedLineTo(fromX, fromY, toX, toY, pattern)

对于该模式，我使用了 [5,5]，这意味着将交替使用 5px 的破折号和 5px 的空间。

最后，在绘制标记时，我修改了插件中的 drawGrid 函数。

if(options.grid.markingsStyle == 'dashed') {
    ctx.dashedLineTo(xrange.from, yrange.from, xrange.to, yrange.to, [5,5])
} else {
    ctx.moveTo(xrange.from, yrange.from);
    ctx.lineTo(xrange.to, yrange.to);
}

只是认为您可以在修改库时将其用作参考。

Answer 2

不幸的是，Flot 目前不提供更改网格/刻度线样式的方法。您将不得不修改库本身。