http://blog.wu-boy.com/2009/03/jquery-j ... %96-chart/
沒想到 jQuery 可以做到畫圖的功能,Flot 是 Javascript plotting library for jQuery,目前支援瀏覽器:Internet Explorer 6/7/8,Firefox 2.x+,Safari 3.0+,Opera 9.5 和 Konqueror 4.x+,瀏覽器跑起來都還不錯快,唯獨 Internet Explorer 有另外寫一個 excanvas 模擬器,也就是在 IE 上面看還需要 include 另外一個 js 檔案,才可以顯示圖形,我在 google 找到一些也是 PHP Chart 的好用工具,都是國外開發的:Libchart – Simple PHP chart drawing library,XML/SWF Charts,其實還蠻多的,自己 google 就會出現一堆,不過要上去試試看。
我個人還蠻喜歡 jQuery 的,所以我就推薦 Flot 這一個 jQuery 的 library,在官網上面有很多 example 的介紹,可以去看看這裡。
畫最簡單的圖,還有支援 cos sin 的三角函數喔
$(function () {
/*
[橫座標,縱座標]
Math.sin 支援三角函數
*/
var d1 = [];
for (var i = 0; i < 14; i += 0.5)
d1.push([i, Math.cos(i)]);
var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
// a null signifies separate line segments
var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
$.plot($("#placeholder"), [ d1, d2, d3 ]);
});
畫出來的圖如下:
也可以加上 label 標籤喔
$(function () {
var d1 = [];
for (var i = 0; i < 14; i += 0.5)
d1.push([i, Math.cos(i)]);
var d2 = [[0, 3], [4, 8], [8, 5], [9, 13], [15, 20]];
var d3 = [];
for (var i = 0; i < Math.PI * 5; i += 0.25)
d3.push([i, Math.sin(i)]);
$.plot($("#placeholder"),
[
{ label: "線條一", data: d1},
{ label: "線條二", data: d2},
{ label: "線條三", data: d3}
]
);
});
圖形如下:
參考文章:
flot – 用 jQuery 畫圖的 library
[jQuery] Javascript plotting library 畫圖 chart
前往
- Software
- ↳ CodeCharge Studio
- ↳ CodeCharge
- ↳ DemoCharge
- ↳ SuperPDF
- ↳ 551einv
- ↳ E3進銷存
- 程式語言
- ↳ PHP
- ↳ CodeLobster PHP Edition
- ↳ Yii
- ↳ CodeIgniter
- ↳ Phalcon
- ↳ Symfony
- ↳ FuelPHP
- ↳ Zend Framework 2
- ↳ laravel
- ↳ WordPress
- ↳ ASP.NET/C#
- ↳ ASP/VBScript
- ↳ JSP
- ↳ Java Servlets
- ↳ ColdFusion
- ↳ Perl
- ↳ Java Script
- ↳ jQuery
- ↳ HTML + CSS
- ↳ jQuery
- ↳ nodejs
- ↳ VB6
- ↳ Git
- ↳ App Inventor 2
- ↳ bash
- ↳ C++/ VC/ OpenCV
- ↳ OpenCV
- ↳ go
- ↳ cordova
- ↳ python
- ↳ Xamarin
- ↳ Assembly
- 資料庫
- ↳ MySQL
- ↳ PostgreSQL
- ↳ ORACLE
- ↳ Access
- ↳ SQL Server
- ↳ SQLite
- ↳ MariaDB
- ↳ Mongodb
- 作業系統
- ↳ Linux
- ↳ Ubuntu
- ↳ CentOS
- ↳ Mint
- ↳ Mandriva
- ↳ Debian
- ↳ Red Hat Enterprise Linux
- ↳ Oracle Linux
- ↳ Fedora
- ↳ Kali Linux
- ↳ OpenSUSE
- ↳ Elementary OS
- ↳ Microsoft
- ↳ Server 2008 R2
- ↳ Server 2012 R2
- ↳ Server 2012
- ↳ 8
- ↳ 10
- ↳ System Center 2016
- ↳ NOVELL
- ↳ FreeBSD
- ↳ VMware
- ↳ VirtualBox
- ↳ Mac OS X
- ↳ Solaris
- ↳ iOS
- ↳ Android
- ↳ Cloud
- ↳ OpenStack
- ↳ Docker
- ↳ Proxmox VE
- ↳ CloudReady
- ↳ chrome
- 網頁伺服器
- ↳ apache
- ↳ tomcat
- ↳ nginx
- ↳ IIS
- ↳ JBoss
- ↳ weblogic
- ↳ WebHosting
- 硬體
- ↳ 硬體及週邊
- ↳ RouterOS
- ↳ LEGO NXT
- ↳ Arduino
- ↳ MSP430
- ↳ Raspberry Pi
- ↳ OpenERP
- ↳ Storage
- ↳ Server
- ↳ Brocade
- ↳ MODELS
- ↳ FortiGate
- 軟體
- ↳ sublime
- ↳ LibreNMS