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

问题描述

我对这个flot API非常新颖。我想要虚线网格线/ ticklines而不是实线X轴'和Y轴'。任何人都可以帮助我？

预先感谢！

解决方案

我可以通过修改库来为网格标记生成虚线。我现在使用Flot版本0.8.0

首先，我在栅格下（在400行左右）添加了一个新属性，位于markingsLineWidth下方：

$ b

  markingsStyle：'dashed'
  

由于Flot使用画布渲染图表，因此我使用此代码。我在Flot代码顶部的颜色分析器插件之后添加了它，并给了David一些信用。 dashedLineTo（）有以下参数：

  dashedLineTo（fromX，fromY，toX，toY，pattern）
  

对于这个模式，我使用了[5,5]，这意味着交替5px的破折号和5px的空格。 / p>

最后我在绘制标记时修改了插件中的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）; 
} 
  

只是想在修改库时可以使用它作为参考。 p>

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??

Thanks in advance!

解决方案

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

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

markingsStyle: 'dashed'

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)

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

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.

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