• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

flot/flot: Attractive JavaScript charts for jQuery

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

flot/flot

开源软件地址:

https://github.com/flot/flot

开源编程语言:

JavaScript 100.0%

开源软件介绍:

flot Build Status CircleCI Coverage Status Greenkeeper badge

About

flot is a JavaScript plotting library for engineering and scientific applications derived from Flot: http://www.flotcharts.org/

Take a look at the the examples in examples/index.html; they should give a good impression of what flot can do, and the source code of the examples is probably the fastest way to learn how to use flot.

Installation

Just include the JavaScript file after you've included jQuery.

Generally, all modern browsers are supported.

You need at least jQuery 1.2.6, but try at least 1.3.2 for interactive charts because of performance improvements in event handling.

Basic usage

Create a placeholder div to put the graph in:

<div id="placeholder"></div>

You need to set the width and height of this div, otherwise the plot library doesn't know how to scale the graph. You can do it inline like this:

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

You can also do it with an external stylesheet. Make sure that the placeholder isn't within something with a display:none CSS property - in that case, Flot has trouble measuring label dimensions which results in garbled looks and might have trouble measuring the placeholder dimensions which is fatal (it'll throw an exception).

Then when the div is ready in the DOM, which is usually on document ready, run the plot function:

$.plot($("#placeholder"), data, options);

Here, data is an array of data series and options is an object with settings if you want to customize the plot. Take a look at the examples for some ideas of what to put in or look at the API reference. Here's a quick example that'll draw a line from (0, 0) to (1, 1):

$.plot($("#placeholder"), [ [[0, 0], [1, 1]] ], { yaxis: { max: 1 } });

The plot function immediately draws the chart and then returns a plot object with a couple of methods.

Documentation and examples

API Documentation is available here: API reference

About how the plugins work: Plugins

High level overview on how interactions are handled internally: Interactions

Examples are included in the examples folder of this repository, but they can be tried out online as well: Examples

CircleCI

CircleCI is used in this repo to run dont-break, which checks if the current version of flot breaks unit tests on specified dependent projects.




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap