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

　　

数据图 饼图 曲线图

 

　　*代码附后*

　　以前知道的工具有Open Flash Chart, 还有 Google 出品的Google Chart Tool. 两者使用不同的技术, 同时也是两种截然不同的设计理念. 相比较而言, 我更认同 Google Chart 的设计理念. 原因如下:

　　Open Flash Chart 使用 Flash 来做图, 这本来也可以接受. 但是, 图形的样式必须通过一个 URL 返回的数据来指定, 而不是网页端技术.

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

　　显而易见, Open Flash Chart 的技术和理念太陈旧了, 所以不推荐使用. 但是, Google Chart Tool 也有一个重大缺陷, 就是不能离线使用. 当网络状况不好时(在***经常遇到), 就没法使用了. Google 太霸道, 也不能用.

　　flot 也是 Google Chart Tool 类似的理念, 所以使用起来非常方便, 而且 demo 代码简单修改就能运行, 学习曲线非常轻松. 而且完美支持 IE6.

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

 

<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" ></div>

</body>

</html> 

 

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