強大的純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