Flotr 快速入门指南

Flotr 是一个基于 Prototype 开发的 JavaScript 绘图工具。支持图例、鼠标跟踪、图片区域选择、图片缩放、添加事件钩子（event hook）、通过 CSS 设置样式等。本文是快速创建并运行 Flotr 的入门指南。首先确保你从 Google Project 得到 Flotr 的副本。

准备 HTML

要使用 Flotr，你得在header标签中包含如下脚本：

<!--[if IE]><script src="path/to/excanvas.js"></script><![endif]-->
<script src="path/to/prototype-x.x.x.x.js"></script>
<script src="path/to/flotr.js"></script>

第一个 script 标签包含了一个 html 条件语句，这样可以确保只有在用户使用 IE 时才包含 excanvas JavaScript 文件。Firefox、Safari 和 Opera 9 支持 canvas 标签来绘制 2d 图形。IE 有一些类似于 canvas 标签的东西，叫 VML[http://en.wikipedia.org/wiki/Vector_Markup_Language]。Excanvas 为 IE 增加了 canvas 功能，但其它浏览器不需要它。

现在我们已经包含了 JavaScript 文件，还需要一个 div元素来显示图表。Flotr 在绘制时插入两个 canvas 标签到此 div 中。第一个 canvas 标签用来绘制背景网格、轴和图表，第二个 canvas 标签用作重叠显示用户交互。

设置容器 div 的宽高是非常重要的，可以使用内联的样式属性，或者 css 规则来实现。一个容器 div 的实例：

<div id="container" style="width:600px;height:300px;"></div>

所有需要的 html 就这些。当然，你可以为各种各样用 Flotr 创建的图表设置样式。详见 CSS 章节。

准备 JavaScript

与 Plotr 不同，Flotr 的语法极其简单。绘制图表仅需调用 Flotr.draw(element, series, options) 就行了，其参数为：

element: 容器元素
eries: 系列数组
options: 可选的选择对象

<h3 id="series">Flotr (数据)系列</h3>

Flotr 可接受的数据由系列数组组成，如：

[ serie1, serie2, ... ]

系列可以是原生数据或属性对象。原生数据的格式为 x 和 y 坐标的数组：

[ [x1, y1], [x2, y2], ... ]

通过传递一个对象，你也可以传递系列为指定选项：

{
  color: 颜色或数字,
  data: 原生数据,
  label: 字符,
  lines: 特定的 lines 选项,
  bars: 特定的 bars 选项,
  points: 特定的 points 选项,
  mouse:  鼠标追踪选项,
  shadowSize: 数字
}

这样的系列对象可能是：

{
  data: [ [1, 2], [2, 4], [3, 6] ],
  label: "y = 2x",
  lines: {fill: true},
  points: {show: true}
}

下面实例实现了 JavaScript 怎样绘制两个系列，代码可能如下：

// Execute this when the page's finished loading
var f = Flotr.draw(
  $('container'), [
  { // first series
    data: [[0, 0], [1, 2], [2, 4], [3, 6], [4, 8]],
    label: "y = 2x",
    lines: { show: true, fill: true },
    points: { show: true }
  },
  { // second series
    data: [[0, 2.5], [1, 5.5], [2, 8.5], [3, 11.5], [4, 14.5]],
    label: "y = 2.5 + 3x"
  }]
);

图表将会插入到 id 为 container 的元素中。第一个系列由一条带有特定坐标（数据属性）点的线组成。当指定系列标签时，会为图表自动添加图例。第二个系列中是一条功能为 y = 2.5 + 3 的直线。了解更多数据系列，参看给 Flotr 传递数据。

选项对象

Flotr.draw() 的第三个参数为一个可选的属性对象，该属性可以覆盖图例、网格、线、轴等的默认属性：

{
  colors: 颜色或数字数组,
  legend: 特定的图例,
  xaxis: 特定的 xaxis 选项,
  yaxis: 特定的 yaxis 选项,
  grid: 特定的 grid 选项,
  lines: 特定的 lines 选项,
  bars: 特定的 bars 选项,
  points: 特定的 points 选项,
  selection: 鼠标选择选项,
  mouse: 鼠标追踪选项,
  shadowSize: 数字
}

所以说选项对象会覆盖默认属性，但轮到那些选项时，却被系列对象定义的选项所覆盖。

更多资源：