[Javascript] 在網頁畫線的方法蒐集

記錄一下網頁上如何畫出線條的方法

D3.js with SVG

https://bl.ocks.org/mbostock/f705fc55e6f26df29354

http://jsfiddle.net/9tr7w/360/

Canvans

[D3.js] 使用d3.js畫出Google 風格的測量儀器效果

使用d3.js來製作google style的測量儀器效果，用來顯示cpu、mem非常直覺 :D
作者說可以任意用在商業用途上，請參考作者的gist
https://gist.github.com/tomerd/1499279

[D3.js] 長在D3.js上面的繪圖函式庫

如果喜歡D3又想要加速繪圖，可以試試以下的基於D3的第三方繪圖函式庫，輕鬆體驗D3畫報表的爽度 :D，目前依Github Start數最高的為Rickshaw。

c3

C3 enables deeper integration of charts into your application.

dimple

An object-oriented API for business analytics powered by d3.

Dc.js (Dimensional Charting Javascript Library)

dc.js is a javascript charting library with native crossfilter support and allowing highly efficient exploration on large multi-dimensional dataset (inspired by crossfilter's demo). It leverages d3 engine to render charts in css friendly svg format. Charts rendered using dc.js are naturally data driven and reactive therefore providing instant feedback on user's interaction. The main objective of this project is to provide an easy yet powerful javascript library which can be utilized to perform data visualization and analysis in browser as well as on mobile device.

xCharts

xCharts is a JavaScript library for building beautiful and custom data-driven chart visualizations for the web using D3.js. Using HTML, CSS, and SVG, xCharts are designed to be dynamic, fluid, and open to integrations and customization.

Rickshaw 

Rickshaw is a JavaScript toolkit for creating interactive time series graphs.

[AngularJS] NVD3基於D3繪圖的directive module

An AngularJS directive for NVD3 re-usable charting library (based on D3).
Easily customize your charts via JSON API.

http://krispo.github.io/angular-nvd3/#/

NVD3讓你可以透過directive來實現D3的繪圖效果: D，使用Angular需要圖表呈現可以考慮

[AngularJS] 支援AngularJS 相關畫圖的open source

本文筆記一下目前可以支援angualr寫作風格的圖表open source。

D3.js

https://github.com/n3-charts
Making AngularJS charts as easy as pie.

http://nvd3.org/index.html
This project is an attempt to build re-usable charts and chart components for d3.js without taking away the power that d3.js gives you. This is a very young collection of components, with the goal of keeping these components very customizeable, staying away from your standard cookie cutter solutions.

http://www.fullscale.co/dangle/

A set of AngularJS directives that provide common visualizations based on D3

Google chart

http://bouil.github.io/angular-google-chart/#/generic/LineChart

Kendo UI

http://kendo-labs.github.io/angular-kendo/#/

Highcharts

https://github.com/pablojim/highcharts-ng