Flotomatic 技术文档

1. 安装指南

要安装 Flotomatic 插件，请执行以下命令：

script/plugin install git://github.com/xdotcommer/flotomatic.git

安装后，以下是可用的 Rake 任务：

• rake：默认执行 spec 测试。
• rake rdoc：在 rdoc 文件夹中创建文档。
• rake install：复制 public 目录下的 JavaScript 和样式表文件。此任务在安装时自动执行。

2. 项目使用说明

Flotomatic 是一个基于 Ruby on Rails 的 JavaScript 图表库 Flot 的封装。它最初是为了在 MigraineLiving.com 网站上绘制偏头痛历史图而开发的。

已知问题：

• 在概览图中进行缩放操作前，必须先在主图中至少缩放一次，才能正常使用缩放功能。
• 使用 flot_selections div 选择数据集时，图表的缩放会丢失，它会完全缩放到最外层。

示例

以下示例并非完整的工作示例，仅用于说明如何通过 API 进行操作。它假设已经创建了两个具有特定属性的数据集（@journals, @migraines）。

要查看一个完整的工作示例，可以在项目的 example 目录下运行 script/server，然后在浏览器中访问 http://localhost:3000/flotomatic。

控制器示例：

@flot = TimeFlot.new('graph') do |f|
  f.bars
  f.grid :hoverable => true
  f.selection :mode => "xy"
  f.filter {|collection| collection.select {|j| j.entry_date < Date.parse("7/8/2007")}}
  f.series_for("压力", @journals, :x => :entry_date, :y => :stress_rating)
  f.series_for("睡眠时长", @migraines, :x => :entry_date, :y => :hours_of_sleep)
  f.series_for("是否良好睡眠？", @migraines, :x => :entry_date, :y => lambda {|record| record.restful_night ? 5 : 0 }, :options => {:points => {:show => true}, :bars => {:show => false}})
  f.series_for("偏头痛", @migraines, :x => :entry_date, :y => lambda {|record| record.migraine? ? 4 : nil }, :options => {:points => {:show => true}, :bars => {:show => false}})
end

视图示例：

<%= flot_includes %>

<h2>绘制以下项目</h2>

<div class='flot_dataset_picker'>
  <%= flot_selections %>
</div>

<h2>我的图表</h2>

<%= flot_canvas("graph") %>

<h2>缩放</h2>

<%= flot_overview("asdflkjasdf") %>

<!-- 实际绘制图表 -->
<% flot_graph("graph", @flot) do %>
  <%= flot_plot(:dynamic => true, :overview => true) %>
  <%= flot_tooltip %>
<% end %>

3. 项目 API 使用文档

在 <% flot_graph %> 区块内，你可以访问 flotomatic 变量。

flotomatic 变量使用 canvas div 的 ID、传递给 flot_graph 调用的 Flot 对象中的数据及选项创建。

例如：

<% flot_graph("canvas", @flot) %>

这会生成以下内容：

var flotomatic = new Flotomatic("canvas", @flot.data, @flot.options)

Flotomatic 方法

绘图方法

• draw(placeholder, data, initialOptions, ranges, dynamic, zoom)：实际使用 $.plot 绘制图表。
• graph(overview, dynamic)：调用 draw 方法并设置 flotomatic.plot 为返回的图表句柄。
• graphDynamic()：动态绘制具有选择输入复选框的每个数据集的图表。
• graphOverview()：绘制概览（缩放）图表。

工具提示方法

• createTooltip(tooltipFormatter)：创建工具提示。
• tooltipFormatter(item)：默认的工具提示格式化函数。

tooltipFormatter: function(item) {
  var date = new Date(item.datapoint[0]),
      label = item.series.label;

  return label + ": " + item.datapoint[1] + " 于 " + (date.getMonth() + 1) + "/" + date.getDate();
}

4. 项目安装方式

请参考“安装指南”部分中的步骤进行安装。