flot中的虚线标题/网格线

Question

我对这个flot API很新。我希望有虚线网格线/刻度线而不是实线X轴和Y轴。任何人都可以帮我解决这个问题吗？

提前致谢！

Answer 1

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

首先，我在网格下（第400行附近）添加了一个新属性，位于markingsLineWidth下方：

markingsStyle: 'dashed'

由于Flot使用canvas来渲染图表，因此我使用David Owens的code为画布添加了一个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目前没有提供改变网格/刻度线样式的方法。你必须修改库本身。