强大的纯JS数据图工具-flot

时间 2019-11-17

原文原文链接

发现一个在网页中绘制数据图, 如曲线图, 柱状图的纯 JavaScript 工具: flot. 极度推荐啊! 有图和代码为证:

*代码附后*javascript

之前知道的工具备 Open Flash Chart, 还有 Google 出品的 Google Chart Tool. 二者使用不一样的技术, 同时也是两种大相径庭的设计理念. 相比较而言, 我更认同 Google Chart 的设计理念. 缘由以下:php

Open Flash Chart 使用 Flash 来作图, 这原本也能够接受. 可是, 图形的样式必须经过一个 URL 返回的数据来指定, 而不是网页端技术.html

Google Chart Tool 使用 VML 来作图, 同时实现数据和表现的分离, 是 MVC 的思想. 这样的好处是, 同一份数据, 能够用来显示曲线图, 也能够显示成柱状图等等.java

显而易见, Open Flash Chart 的技术和理念太陈旧了, 因此不推荐使用. 可是, Google Chart Tool 也有一个重大缺陷, 就是不能离线使用. 当网络情况很差时(在中国大陆常常遇到), 就无法使用了. Google 太霸道, 也不能用.jquery

flot 也是 Google Chart Tool 相似的理念, 因此使用起来很是方便, 并且 demo 代码简单修改就能运行, 学习曲线很是轻松. 并且完美支持 IE6.canvas

附一个能够运行的 flot 例子代码, 将下面的代码保存成 a.html, 而后到 flot 网站下载 JavaScript 代码, 保证路径正确便可用浏览器打开看效果.api

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>flot</title>
	<!--[if lte IE 8]>
		<script language="javascript" type="text/javascript" src="excanvas.min.js"></script>
	<![endif]-->
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="jquery.flot.js"></script>
</head>
<body>

<script type="text/javascript">
<!--
var data = [];
data.push({
    "label": "中国",
    "data": [[2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1]]
});

$(function(){
    var options = {
        lines: { show: true },
        points: { show: true },
        xaxis: { tickDecimals: 0, tickSize: 1 }
    };
    var placeholder = $("#placeholder");
    $.plot(placeholder, data, options);
});
//-->
</script>

<div id="placeholder" style="width:500px;height:240px"></div>

</body>
</html>

flot 项目首页: http://code.google.com/p/flot/浏览器

补充: 再推荐另一个很是不错的工具 – Highcharts, 看起来功能更强大, 但还没调研使用是否简便.网络

附:ide

强大的纯JS数据图工具-flot

获取动态加载的图片大小的正确方法