flot 中的虚线刻度线/网格线 [英] dashed ticklines/gridlines in flot

问题描述

我对这个 flot API 很陌生.我想要虚线网格线/刻度线而不是实线 X 轴和 Y 轴.谁能帮我解决这个问题?

I am pretty new to this flot API. I want to have dashed gridlines/ticklines instead of solid line both X-axis' and Y-axis'. Can anyone help me with this??

提前致谢！

推荐答案

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

I was able to produce dashed lines for the grid's markings by modifying the library. I'm currently using Flot ver 0.8.0

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

First I added a new attribute under grid (around line 400), just below the markingsLineWidth:

markingsStyle: 'dashed'

由于 Flot 使用画布呈现图表，我使用此 代码.我在 Flot 代码顶部的颜色解析器插件之后添加了它，并归功于 David.dashedLineTo() 有以下参数:

Since Flot is using canvas to render the charts, I added a dashedLineTo() extension for the canvas using this code from David Owens. I added it just right after the color parser plugin on top of the Flot's code, with credits given to David. The dashedLineTo() has the following parameters:

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

对于图案，我使用了 [5,5]，这意味着将交替使用 5px 的破折号和 5px 的空间.

For the pattern, I used [5,5] which means there will alternating 5px of dash, and 5px of space.

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

Finally I modified the drawGrid function in the plugin, when the markings are being drawn.

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

只是想在修改库时可以将其用作参考.

Just thought you can use this as a reference when modifying the library.

这篇关于flot 中的虚线刻度线/网格线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！