JavaScript -- 2D 繪圖

JavaScript

簡介

歷史

開發工具

基本語法

運算式

分枝

迴圈

函數

陣列

物件導向

原型

封裝

繼承

多型

this

控制流程

進階功能

Eval 函數

Closure

JSONP

小書籤

字串

正規表達式

除錯方法

伺服端

播 midi

cookie

套件

ccc函式庫

2D 繪圖

3D 繪圖

影像處理

訊號處理

語音處理

數學計算

tex 數學式

格式轉換

桌面應用

自然語言

地理資訊

平台

Node.js

jQuery

Google

numeric.js

Titanium

引擎

語法

作品

翻譯精靈

繪圖精靈

DotWiki

流程

前端工程師

後端工程師

css

訊息

相關網站

參考文獻

最新修改

簡體版

English

D3.js

flot

<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Flot Examples</title>
    <link href="layout.css" rel="stylesheet" type="text/css">
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="http://people.iola.dk/olau/flot/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
 </head>
    <body>
    <div id="placeholder" style="width:600px;height:300px;"></div>

<script type="text/javascript">
$(function () {
    var d1 = [], dcos=[];
    for (var i = 0; i < 14; i += 0.5)
        dcos.push([i, 5*Math.cos(i)]);

    for (var i = 0; i < 14; i += 0.5)
        d1.push([i, Math.sin(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"), [ dcos, d1, d2, d3 ]);
});
</script>

 </body>
</html>

D3JS: A new area of dashboarding

http://diethardsteiner.blogspot.tw/2012/08/d3js-new-area-of-dashboarding.html?spref=fb

Google Chart

http://chart.apis.google.com/chart?cht=lc&chd=t:-1|15,45&chs=250x150&chco=FF0000,000000&chfd=0,x,0,11,0.1,sin(x)*50%2B50&chxt=x,y&chm=c,00A5C6,0,110,10|a,00A5C6,0,60,10

chart?cht=lc&chd=t:-1|15,45&chs=250x150&chco=FF0000,000000&chfd=0,x,0,11,0.1,sin(x)*50%2B50&chxt=x,y&chm=c,00A5C6,0,110,10|a,00A5C6,0,60,10

相關套件

  1. flot — http://people.iola.dk/olau/flot/examples/
    • 可互動，超讚！
  2. sparkline
  3. jqPlot — http://www.jqplot.com/tests/
    • 與 jQuery 整合，樸素撰寫簡單。
  4. Flot — http://people.iola.dk/olau/flot/examples/
    • 類似 jqPlot，但圖較優美，不過純粹是線圖。
  5. http://www.filamentgroup.com/examples/jqueryui-visualize/
    • jqueryui-visualize — 一行程式就完成了 $('table').visualize();
  6. http://mbostock.github.com/d3/ex/stack.html
    • 高品質
  7. http://www.highcharts.com/
  8. http://jsxgraph.uni-bayreuth.de/showcase/
    • 科學計算圖
  9. 5个主流jQuery图表生成插件评测
  10. 10 Best Javascript Drawing and Canvas Libraries

Facebook
page revision: 18, last edited: 28 Mar 2013 03:01
Edit Rate (0) Tags Discuss (0) History Files Print Site tools + Options
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License