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’

QuickStart Graph 1

效果图表

选项对象

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

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

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

更多资源:

发表评论