2010-7-29 Flot之markings篇

这几天一直在做使用Flot画面的页面。无意间发现Flo中有markings的属性设置，看了下API，发现可以使用这个属性来画简单的直线还有矩形区域。
我想到甚至通过数组可以用其来画一直为之苦恼的点线。
以下是API中的说明。

"markings" is used to draw simple lines and rectangular areas in the background of the plot.
You can either specify an array of ranges on the form { xaxis: { from, to }, yaxis: { from, to } } (secondary axis coordinates with x2axis/y2axis) or with a function that returns such an array given the axes for the plot in an object as the first parameter.

我最先把它放在option中试了一下，发现始终没出来。
由于没有时间去研究它，又搁置了几天。
后来再详细阅读API，发现不是直接写在option下的，而是写在option的grid属性下的。
这下终于出来了，挺开心的。这个属性挺好用，可以用来画一些辅助线。
以前一直以为官方的Flot没有办法去画点线，现在画面中央出来了一条点线的辅助线，leader看到时吃了一惊。

下面关于markings属性做点小笔记。

◎ marking的定义形式
  grid: {
        markings: array of markings or (fn: axes -> array of markings)
    }

 

◎ 例子
1. draw a line horrizonally
    markings: [ { xaxis: { from: 0, to: 14}, yaxis: { from: 0, to: 0 }, color: "#48d1cc" }]

2. draw a horrizonal rectangular area
    markings: [ { xaxis: { from: 0, to: 14}, yaxis: { from: -0.5, to: 0.5 }, color: "#48d1cc" }]

3. draw a line vertically
    markings: [ { xaxis: { from: Math.PI/2, to: Math.PI/2}, yaxis: { from:-1.5, to: 1.5 }, color: "#48d1cc" }]

4. draw a vertical rectangular area
    markings: [ { xaxis: { from: Math.PI - 0.5, to: Math.PI + 0.5}, yaxis: { from:-1.5, to: 1.5 }, color: "#48d1cc" }]

5. draw mutiple area
    markings: [ { xaxis: { from: 0, to: 14}, yaxis: { from: 0.3, to: 0.7 }, color: "#FFA500" }, { xaxis: { from: 0, to: 14}, yaxis: { from: -0.7, to: -0.3 }, color: "#90EE90"}]

6. draw dashed line by arary & function
    markings: function (axes) {
    var markings = [];
    for (var y = axes.yaxis.min; y <= axes.yaxis.max; y += 0.2) {
      markings.push({ xaxis: { from: Math.PI/2, to: Math.PI/2 }, yaxis: { from: y, to: y + 0.1} , color: "#FF8C00" });
      markings.push({ xaxis: { from: Math.PI*3/2, to: Math.PI*3/2 }, yaxis: { from: y, to: y + 0.1} , color: "#FF8C00" });
      markings.push({ xaxis: { from: Math.PI*5/2, to: Math.PI*5/2 }, yaxis: { from: y, to: y + 0.1} , color: "#FF8C00" });
        }
    return markings;
  }