分类
Javascript

Flotr快速入门指南

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

准备HTML

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

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

第一个script标签包含了一个html条件语句, 这样可以确保只有在用户使用IE时才包含excanvas?javascript文件。Firefox、Safari和Opera 9 支持canvas标签来绘制2d图形。IE有一些类似于canvas标签的东西,叫VML。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: 容器元素
  • series: 系列数组
  • options: 可选的选择对象

Flotr (数据)系列

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: 数字
}

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

更多资源: