我要做個這樣的圖表用jquery的什么插件能實現(xiàn)

13 個JavaScript圖表和圖形繪制插件。少數(shù)是獨立的框架，大多數(shù)支持條圖、線圖、餅圖等基本圖形，很多甚至支持更加復(fù)雜的圖形，

專注于為中小企業(yè)提供成都做網(wǎng)站、網(wǎng)站制作服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)喀喇沁免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上1000+企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

比如：維恩圖、熱圖、進化樹、二維散點圖、二維散點氣泡圖、三維散點圖等。相信你應(yīng)當(dāng)能在這個列表中找到所需的。

1. Flotr2

獨立框架庫，支持HTML5圖表和圖形。它是 flotr 的一個分支版本，

移除了 Prototype 依賴性，并且有很多改進。支持：線圖、條圖、蠟狀圖、餅圖、氣泡圖。諸如 IE6 類的老瀏覽器也支持。

2. Rickshaw

用于創(chuàng)建交互式時序圖的JS工具。它依賴 D3 可視化庫和其他一些 jQuery 和 jQuery UI 的插件。

3. D3

一款著名且高效的可視化庫。

4. Awesome Chart JS

簡潔的JS庫，用于基于HTML5畫布元素的圖表。

5. canvasXpress

CanvasXpress是一個JavaScript庫的基礎(chǔ)上實現(xiàn)的標(biāo)簽在HTML5。

我開發(fā)這個我們的BMS系統(tǒng)生物學(xué)平臺為核心的可視化組件庫。

它支持瘋狂的高度復(fù)雜的圖表和圖形。

6. RGraph

RGraph是一個HTML5的JavaScript圖表庫，支持超過20種不同類型的圖表。

RGraph創(chuàng)建使用新的HTML5 canvas標(biāo)簽，這些JavaScript圖表在Web瀏覽器，這意味著更快的網(wǎng)頁和Web服務(wù)器的負(fù)載較少。，

使用RGraph是一種簡單的方法加快你的網(wǎng)站。

7. dygraphs

dygraphs是一個開源JavaScript庫，生產(chǎn)產(chǎn)生交互式的，可縮放的時間序列圖。

它被設(shè)計為顯示密集的數(shù)據(jù)集，使用戶能夠探索和解釋他們。這是一個輕量級的解決方案，并在Internet Explorer中的作品。

8. HighCharts

Highcharts是一個純JavaScript編寫的圖表庫，提供直觀的，交互式的圖表到您的網(wǎng)站或Web應(yīng)用程序。

Highcharts目前支持線，樣條，面積，areaspline，柱，棒圖，餅圖，散點圖類型。

一位著名的圖表/圖形解決方案，如IBM，美國航空航天局，西門子，惠普等眾多知名機構(gòu)

9. gRaphael

gRapha?l的目標(biāo)是幫助您在您的網(wǎng)站上創(chuàng)造了驚人的圖表。它是基于上拉斐爾圖形庫。退房的演示，在行動中看到靜態(tài)和交互式圖表。

gRapha?l目前支持Firefox3.0+，Safari 3.0以上版本，歌劇9.5+和Internet Explorer 6.0以上。

10. jqPlot

jqplot的繪圖和制圖插件的jQuery的JavaScript框架。 jqplot的產(chǎn)生美麗的線，棒材和餅圖的許多功能。

11. JS Charts

JS Charts是一種基于JavaScript的圖表生成，需要很少或根本沒有編碼。

用JS圖表繪制圖表是一個簡單而容易的事，因為你只需要使用客戶端腳本（即通過您的Web瀏覽器）。

無需額外的插件或服務(wù)器模塊是必需的。包括我們的腳本，準(zhǔn)備圖表數(shù)據(jù)，XML，JSON或JavaScript數(shù)組和您的圖表已準(zhǔn)備就緒！

12. JSXGraph

JSXGraph是一個跨瀏覽器庫進行互動幾何，函數(shù)繪圖，制圖，并在Web瀏覽器中的數(shù)據(jù)可視化。

完全實現(xiàn)在JavaScript中，不依賴于任何其他的庫，并使用SVG，VML，或帆布。

JSXGraph容易嵌入，具有占地面積?。盒∮?00 K字節(jié)，如果嵌入在網(wǎng)頁中。無插件！已采取特別護理，以優(yōu)化性能。

13. Humble Finance

HumbleFinance是一個HTML5寫作為示范在HTML5的互動圖形數(shù)據(jù)可視化工具。它是類似的Flash上工具。

工具本身是完全用JavaScript編寫，使用Prototype和Flotr庫。它可用于顯示任何兩個2-D的數(shù)據(jù)集的真實的數(shù)值數(shù)據(jù)共享的軸線。

jquery圖表插件highcharts軟件的使用小技巧

當(dāng)我們使用highcharts做這樣的圖是不是很老火，其實開始我感覺很麻煩。但是官網(wǎng)上有demo，雖然只有很小一部分?；景俣纫幌戮涂梢哉业郊尤肭€。其實就是

serese

的數(shù)據(jù)，只是加入type屬性就更改成你想要的。下面那個table你可以使用table加入jquery實現(xiàn)就ok了

$(function

()

{

$('#container').highcharts({

chart:

{

type:

'column'

},

title:

{

text:

'Stacked

column

chart'

},

xAxis:

{

gridLineWidth:1,

plotOptions:

{

column:

{

pointPadding:

0.2,

pointWidth:

30

//柱子的寬度30px

}

},

//tickPixelInterval:100,

categories:

['Apples',

'Oranges',

'Pears',

'Grapes',

'Bananas']

},

yAxis:

{

tickPositions:

[0,

100,

200,

300,

400,500],//設(shè)置刻度

min:

0,

title:

{

text:

'Total

fruit

consumption'

},

stackLabels:

{

enabled:

true,

style:

{

fontWeight:

'bold',

color:

(Highcharts.theme

Highcharts.theme.textColor)

||

'gray'

}

}

},

legend:

{

align:

'right',

x:

-100,

verticalAlign:

'top',

y:

20,

floating:

true,

backgroundColor:

(Highcharts.theme

Highcharts.theme.legendBackgroundColorSolid)

||

'white',

borderColor:

'#CCC',

borderWidth:

1,

shadow:

false

},

tooltip:

{

formatter:

function()

{

return

'b'+

this.x

+'/bbr/'+

this.series.name

+':

'+

this.y

+'br/'+

'Total:

'+

this.point.stackTotal;

}

},

plotOptions:

{

column:

{

stacking:

'normal',

pointWidth:

30

,

//柱子的寬度30px

dataLabels:

{

enabled:

true,

color:

(Highcharts.theme

Highcharts.theme.dataLabelsColor)

||

'white'

}

}

},

series:

[{

color:'#F2BE20',

name:

'John',

data:

[50,

30,

40,

70,

20]

},

{

color:'#F8FB23',

name:

'Jane',

data:

[20,

20,

30,

20,

10]

},

{

color:'#E9070B',

name:

'Joe',

data:

[30,

40,

40,

20,

50]

},{type:

'line',

name:

'John',

data:[{

name:

'John',

y:

50

},

{

name:

'John',

y:

30

},

{

name:

'John',

y:

40

},{

name:

'John',

y:

70

},{

name:

'John',

y:

20

}

]},

{type:

'line',

name:

'Joe',

data:[{

name:

'Joe',

y:

30

},

{

name:

'Joe',

y:

40

},

{

name:

'Joe',

y:

40

},{

name:

'Joe',

y:

20

},{

name:

'Joe',

y:

50

}

]},

{type:

'line',

name:

'Jane',

data:[{

name:

'Jane',

y:

20

},

{

name:

'Jane',

y:

20

},

{

name:

'Jane',

y:

30

},{

name:

'Jane',

y:

20

},{

name:

'Jane',

y:

10

}

]}

]

});

});

/script

如何使用jquery來初始化echarts

1.引入 ECharts

!DOCTYPE htmlhtmlhead meta charset="utf-8" !-- 引入 ECharts 文件 -- script src="echarts.min.js"/script/head/html

2.繪制一個簡單的圖表

在繪圖前我們需要為 ECharts 準(zhǔn)備一個具備高寬的 DOM 容器。

body !-- 為 ECharts 準(zhǔn)備一個具備大?。▽捀撸┑?DOM -- div id="main" style="width: 600px;height:400px;"/div/body

3.然后就可以通過 echarts.init 方法初始化一個 echarts 實例并通過 setOption 方法生成一個簡單的柱狀圖，下面是完整代碼。

!DOCTYPE htmlhtmlhead meta charset="utf-8" titleECharts/title !-- 引入 echarts.js -- script src="echarts.min.js"/script/headbody !-- 為ECharts準(zhǔn)備一個具備大?。▽捀撸┑腄om -- div id="main" style="width: 600px;height:400px;"/div script type="text/javascript" // 基于準(zhǔn)備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和數(shù)據(jù) var option = { title: { text: 'ECharts 入門示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。 myChart.setOption(option); /script/body/html