當(dāng)前，數(shù)據(jù)可視化已經(jīng)成為數(shù)據(jù)科學(xué)領(lǐng)域非常重要的一部分。不同網(wǎng)絡(luò)系統(tǒng)中產(chǎn)生的數(shù)據(jù)，都需要經(jīng)過(guò)適當(dāng)?shù)目梢暬幚?，以便更好的呈現(xiàn)給用戶讀取和分析。

創(chuàng)新互聯(lián)公司專注于崇仁企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,成都商城網(wǎng)站開發(fā)。崇仁網(wǎng)站建設(shè)公司,為崇仁等地區(qū)提供建站服務(wù)。全流程按需定制設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

對(duì)任何一個(gè)組織來(lái)說(shuō)，如果能夠充分的獲取數(shù)據(jù)、可視化數(shù)據(jù)和分析數(shù)據(jù)，那么就能很大程度上幫助了解數(shù)據(jù)產(chǎn)生的深層次原因，以便據(jù)此做出正確的決定。

對(duì)于前端開發(fā)人員來(lái)說(shuō)，如果能夠掌握交互式網(wǎng)頁(yè)中的數(shù)據(jù)可視化技術(shù)，則是一項(xiàng)很棒的技能。當(dāng)然，通過(guò)一些 JavaScript 的圖表庫(kù)也會(huì)使前端的數(shù)據(jù)可視化變得更加容易。使用這些庫(kù)，開發(fā)者可以在無(wú)需考慮不同的語(yǔ)法所帶來(lái)的編程難題的情況下，輕松實(shí)現(xiàn)將數(shù)據(jù)轉(zhuǎn)化為易于理解的圖表。

下面是挑選出的9個(gè) JavaScript 圖表庫(kù)：

• Chart.js
• Chartist
• FlexChart
• Echarts
• NVD3
• C3.js
• TauCharts
• ReCharts
• Flot

Chart.js

Chart.js 是一種簡(jiǎn)潔、用戶友好的圖表庫(kù)，同時(shí)也是基于 HTML5 的 JavaScript 庫(kù)，用于創(chuàng)建動(dòng)畫、交互式和可自定義的圖表和圖形。

借助 Chart.js，用戶可以輕松直觀地查看混合圖表類型。默認(rèn)情況下，也可以使用 Chart.js 創(chuàng)建響應(yīng)式網(wǎng)頁(yè)。

Chart.js 庫(kù)允許用戶快速創(chuàng)建可視化數(shù)據(jù)。Chart.js 易于設(shè)置，對(duì)初學(xué)者十分友好。使用 Chart.js 則不必考慮瀏覽器的兼容性問(wèn)題，因?yàn)?Chart.js 支持舊瀏覽器。

使用 npm 安裝 Chart.js：

  
 
 
 

   
  
  
  
npm install chart.js --save 
  
 
 
 

Chart.js 繪制雷達(dá)圖的代碼示例：

  
 
 
 

   
  
  
  
const options = { 
   
  
  
  
 scale: { 
   
  
  
  
 // Hides the scale 
   
  
  
  
 } 
   
  
  
  
}; 
   
  
  
  
const data = { 
   
  
  
  
 labels: ['Running', 'Swimming', 'Eating', 'Cycling'], 
   
  
  
  
 datasets: [ 
   
  
  
  
 　　　　　 { 
   
  
  
  
 data: [-10, -5, -3, -15], 
   
  
  
  
 label: "two", 
   
  
  
  
 borderColor: '#ffc63b' 
   
  
  
  
 }, 
   
  
  
  
 　　　　　{ 
   
  
  
  
 data: [10, 5, 3, 10], 
   
  
  
  
 label: "three", 
   
  
  
  
 borderColor: '#1d9a58' 
   
  
  
  
 }, 
   
  
  
  
 { 
   
  
  
  
 data: [18, 10, 4, 2], 
   
  
  
  
 label: "one", 
   
  
  
  
 borderColor: '#d8463c' 
   
  
  
  
 }, 
   
  
  
  
] 
   
  
  
  
} 
   
  
  
  
const myRadarChart = new Chart(ctx, { 
   
  
  
  
 data: data, 
   
  
  
  
 type: 'radar', 
   
  
  
  
 options: options 
   
  
  
  
}); 
  
 
 
 

Chartist

Chartist 庫(kù)很適合于創(chuàng)建美觀、響應(yīng)能力強(qiáng)、閱讀友好的圖表。Chartist 使用 SVG 來(lái)呈現(xiàn)圖表。

Chartist 還提供了使用 CSS 媒體查詢和創(chuàng)意動(dòng)畫來(lái)自定義圖表的能力。用戶使用 Chartist 在圖表設(shè)計(jì)中實(shí)現(xiàn)自己的所有創(chuàng)意。

Chartist 易于配置，也易于使用 Sass 進(jìn)行定制。但是，它不支持舊瀏覽器。

使用 Chartist，可以通過(guò) CSS 的樣式來(lái)美化你的 SVG，用戶完全可以現(xiàn)實(shí)自己所想的所有圖表樣式。

使用 npm 安裝 Chartist：

  
 
 
 

   
  
  
  
npm install chartist --save 
  
 
 
 

Chartist 創(chuàng)建具有自定義標(biāo)簽的餅圖的代碼示例：

  
 
 
 

   
  
  
  
var data = { 
   
  
  
  
 labels: ['Bananas', 'Apples', 'Grapes'], 
   
  
  
  
 series: [20, 15, 40] 
   
  
  
  
}; 
   
  
  
  
var options = { 
   
  
  
  
 labelInterpolationFnc: function(value) { 
   
  
  
  
 return value[0] 
   
  
  
  
 } 
   
  
  
  
}; 
   
  
  
  
var responsiveOptions = [ 
   
  
  
  
 ['screen and (min-width: 640px)', { 
   
  
  
  
 chartPadding: 30, 
   
  
  
  
 labelOffset: 130, 
   
  
  
  
 labelDirection: 'explode', 
   
  
  
  
 labelInterpolationFnc: function(value) { 
   
  
  
  
 return value; 
   
  
  
  
 } 
   
  
  
  
 }], 
   
  
  
  
 ['screen and (min-width: 1024px)', { 
   
  
  
  
 labelOffset: 80, 
   
  
  
  
 chartPadding: 20 
   
  
  
  
 }] 
   
  
  
  
]; 
   
  
  
  
new Chartist.Pie('.ct-chart', data, options, responsiveOptions); 
  
 
 
 

FlexChart 是高性能的圖表工具。使用 FlexChart，可輕松的將表格數(shù)據(jù)可視化為業(yè)務(wù)圖表。FlexChart 不但支持常見的圖表類型，如折線圖、餅狀圖、面積圖等，還支持氣泡圖、K線圖、條形圖、漏斗圖等高級(jí)圖表類型。

FlexChart 的使用也十分簡(jiǎn)單，F(xiàn)lexChart 圖表將所有與數(shù)據(jù)有關(guān)的任務(wù)都委托給 CollectionView 類，只需操作 CollectionView 類，就能實(shí)現(xiàn)過(guò)濾、排序和分組數(shù)據(jù)等功能。

FlexChart 包含的圖表元素也比較全面，如圖表圖例、圖表標(biāo)題、圖表頁(yè)腳、數(shù)軸、圖表 series 和標(biāo)簽等，用戶也可以為圖表添加自定義的元素，如平均線和趨勢(shì)線等。

FlexChart 本質(zhì)上是一種交互式的圖表，不論是數(shù)據(jù)進(jìn)行任何的更改，都會(huì)自動(dòng)反應(yīng)在圖表上，如圖表曲線隨數(shù)據(jù)放大縮小、過(guò)濾、鉆取、動(dòng)畫等。

查看 FlexChart 的中文學(xué)習(xí)指南和旭日?qǐng)DDemo。

FlexChart 繪制柱狀圖的代碼示例：

  
 
 
 

   
  
  
  
onload = function() { 
   
  
  
  
 // wrap data in a CollectionView so the grid and chart  
   
  
  
  
 // get notifications 
   
  
  
  
 var data = new wijmo.collections.CollectionView(getData()); 
   
  
  
  
 // create the chart 
   
  
  
  
 var theChart = new wijmo.chart.FlexChart('#theChart', { 
   
  
  
  
 itemsSource: data, 
   
  
  
  
 bindingX: 'country', 
   
  
  
  
 series: [ 
   
  
  
  
 { binding: 'sales', name: 'Sales' }, 
   
  
  
  
 { binding: 'expenses', name: 'Expenses' }, 
   
  
  
  
 { binding: 'downloads', name: 'Downloads' } 
   
  
  
  
 ] 
   
  
  
  
 }) 
   
  
  
  
 // create a grid to show the data 
   
  
  
  
 var theGrid = new wijmo.grid.FlexGrid('#theGrid', { 
   
  
  
  
 itemsSource: data 
   
  
  
  
 }) 
   
  
  
  
 // create some random data 
   
  
  
  
 function getData() { 
   
  
  
  
 var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), 
   
  
  
  
 data = []; 
   
  
  
  
 for (var i = 0; i < countries.length; i++) { 
   
  
  
  
 data.push({ 
   
  
  
  
 country: countries[i], 
   
  
  
  
 sales: Math.random() * 10000, 
   
  
  
  
 expenses: Math.random() * 5000, 
   
  
  
  
 downloads: Math.round(Math.random() * 20000), 
   
  
  
  
 }); 
   
  
  
  
 } 
   
  
  
  
 return data; 
   
  
  
  
 } 
   
  
  
  
} 
  
 
 
 

Echarts

Echarts 是網(wǎng)頁(yè)的數(shù)據(jù)可視化方面的一個(gè)非常有用的庫(kù)。使用 Echarts，開發(fā)者可以創(chuàng)建直觀的、可自定義的交互式圖表，讓數(shù)據(jù)的展示和分析變得十分容易。

由于 Echarts 是用普通的 JavaScript 編寫的，所以 Echarts 不存在其它圖表庫(kù)存在的無(wú)法無(wú)縫遷移的問(wèn)題。

同時(shí)，Echarts 也提供了很多官方文檔供用戶查看。

使用 npm 可以很容易的完成 Echarts 的安裝： 

  
 
 
 

   
  
  
  
npm install echarts --save 
  
 
 
 

Echarts 繪制散點(diǎn)圖代碼示例：

  
 
 
 

   
  
  
  
var dom = document.getElementById("container"); 
   
  
  
  
var myChart = echarts.init(dom); 
   
  
  
  
var app = {}; 
   
  
  
  
option = null; 
   
  
  
  
option = { 
   
  
  
  
 title: { 
   
  
  
  
 text: 'Large-scale scatterplot' 
   
  
  
  
 }, 
   
  
  
  
 tooltip : { 
   
  
  
  
 trigger: 'axis', 
   
  
  
  
 showDelay : 0, 
   
  
  
  
 axisPointer:{ 
   
  
  
  
 show: true, 
   
  
  
  
 type : 'cross', 
   
  
  
  
 lineStyle: { 
   
  
  
  
 type : 'dashed', 
   
  
  
  
 width : 1 
   
  
  
  
 } 
   
  
  
  
 }, 
   
  
  
  
 zlevel: 1 
   
  
  
  
 }, 
   
  
  
  
 legend: { 
   
  
  
  
 data:['sin','cos'] 
   
  
  
  
 }, 
   
  
  
  
 toolbox: { 
   
  
  
  
 show : true, 
   
  
  
  
 feature : { 
   
  
  
  
 mark : {show: true}, 
   
  
  
  
 dataZoom : {show: true}, 
   
  
  
  
 dataView : {show: true, readOnly: false}, 
   
  
  
  
 restore : {show: true}, 
   
  
  
  
 saveAsImage : {show: true} 
   
  
  
  
 } 
   
  
  
  
 }, 
   
  
  
  
 xAxis : [ 
   
  
  
  
 { 
   
  
  
  
 type : 'value', 
   
  
  
  
 scale:true 
   
  
  
  
 } 
   
  
  
  
 ], 
   
  
  
  
 yAxis : [ 
   
  
  
  
 { 
   
  
  
  
 type : 'value', 
   
  
  
  
 scale:true 
   
  
  
  
 } 
   
  
  
  
 ], 
   
  
  
  
 series : [ 
   
  
  
  
 { 
   
  
  
  
 name:'sin', 
   
  
  
  
 type:'scatter', 
   
  
  
  
 large: true, 
   
  
  
  
 symbolSize: 3, 
   
  
  
  
 data: (function () { 
   
  
  
  
 var d = []; 
   
  
  
  
 var len = 10000; 
   
  
  
  
 var x = 0; 
   
  
  
  
 while (len--) { 
   
  
  
  
 x = (Math.random() * 10).toFixed(3) - 0; 
   
  
  
  
 d.push([ 
   
  
  
  
 x, 
   
  
  
  
 //Math.random() * 10 
   
  
  
  
 (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0 
   
  
  
  
 ]); 
   
  
  
  
 } 
   
  
  
  
 //console.log(d) 
   
  
  
  
 return d; 
   
  
  
  
 })() 
   
  
  
  
 }, 
   
  
  
  
 { 
   
  
  
  
 name:'cos', 
   
  
  
  
 type:'scatter', 
   
  
  
  
 large: true, 
   
  
  
  
 symbolSize: 2, 
   
  
  
  
 data: (function () { 
   
  
  
  
 var d = []; 
   
  
  
  
 var len = 20000; 
   
  
  
  
 var x = 0; 
   
  
  
  
 while (len--) { 
   
  
  
  
 x = (Math.random() * 10).toFixed(3) - 0; 
   
  
  
  
 d.push([ 
   
  
  
  
 x, 
   
  
  
  
 //Math.random() * 10 
   
  
  
  
 (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0 
   
  
  
  
 ]); 
   
  
  
  
 } 
   
  
  
  
 //console.log(d) 
   
  
  
  
 return d; 
   
  
  
  
 })() 
   
  
  
  
 } 
   
  
  
  
 ] 
   
  
  
  
}; 
   
  
  
  
; 
   
  
  
  
if (option && typeof option === "object") { 
   
  
  
  
 myChart.setOption(option, true); 
   
  
  
  
} 
  
 
 
 

NVD3

NVD3 是由 Mike Bostock 撰寫的基于 D3 的 JavaScript 庫(kù)。NVD3 允許用戶在 Web 應(yīng)用程序中創(chuàng)建美觀的、可復(fù)用的圖表。

NVD3 具有很強(qiáng)大的圖表功能，能夠很方便的創(chuàng)建箱形圖、旭日形和燭臺(tái)圖等。如果用戶想在 JavaScript 圖表庫(kù)中用到大量的能力，推薦試用 NVD3。

NVD3 圖表庫(kù)的速度有時(shí)可能會(huì)成為一個(gè)問(wèn)題，與 Fastdom 安裝配合使用，速度會(huì)更快。

NVD3 繪制簡(jiǎn)單的折線圖代碼示例：

  
 
 
 

   
  
  
  
/*These lines are all chart setup. Pick and choose which chart features you want to utilize. */ 
   
  
  
  
nv.addGraph(function() { 
   
  
  
  
 var chart = nv.models.lineChart() 
   
  
  
  
 .margin({left: 100}) //Adjust chart margins to give the x-axis some breathing room. 
   
  
  
  
 .useInteractiveGuideline(true) //We want nice looking tooltips and a guideline! 
   
  
  
  
 .transitionDuration(350) //how fast do you want the lines to transition? 
   
  
  
  
 .showLegend(true) //Show the legend, allowing users to turn on/off line series. 
   
  
  
  
 .showYAxis(true) //Show the y-axis 
   
  
  
  
 .showXAxis(true) //Show the x-axis 
   
  
  
  
 ; 
   
  
  
  
 chart.xAxis //Chart x-axis settings 
   
  
  
  
 .axisLabel('Time (ms)') 
   
  
  
  
 .tickFormat(d3.format(',r')); 
   
  
  
  
 chart.yAxis //Chart y-axis settings 
   
  
  
  
 .axisLabel('Voltage (v)') 
   
  
  
  
 .tickFormat(d3.format('.02f')); 
   
  
  
  
 /* Done setting the chart up? Time to render it!*/ 
   
  
  
  
 var myData = sinAndCos(); //You need data... 
   
  
  
  
 d3.select('#chart svg') //Select the 
   
  
  
  
 .datum(myData) //Populate the 
   
  
  
  
 .call(chart); //Finally, render the chart! 
   
  
  
  
 //Update the chart when window resizes. 
   
  
  
  
 nv.utils.windowResize(function() { chart.update() }); 
   
  
  
  
 return chart; 
   
  
  
  
}); 
   
  
  
  
/************************************** 
   
  
  
  
 * Simple test data generator 
   
  
  
  
 */ 
   
  
  
  
function sinAndCos() { 
   
  
  
  
 var sin = [],sin2 = [], 
   
  
  
  
 cos = []; 
   
  
  
  
 //Data is represented as an array of {x,y} pairs. 
   
  
  
  
 for (var i = 0; i < 100; i++) { 
   
  
  
  
 sin.push({x: i, y: Math.sin(i/10)}); 
   
  
  
  
 sin2.push({x: i, y: Math.sin(i/10) *0.25 + 0.5}); 
   
  
  
  
 cos.push({x: i, y: .5 * Math.cos(i/10)}); 
   
  
  
  
 } 
   
  
  
  
 //Line chart data should be sent as an array of series objects. 
   
  
  
  
 return [ 
   
  
  
  
 { 
   
  
  
  
 values: sin, //values - represents the array of {x,y} data points 
   
  
  
  
 key: 'Sine Wave', //key - the name of the series. 
   
  
  
  
 color: '#ff7f0e' //color - optional: choose your own line color. 
   
  
  
  
 }, 
   
  
  
  
 { 
   
  
  
  
 values: cos, 
   
  
  
  
 key: 'Cosine Wave', 
   
  
  
  
 color: '#2ca02c' 
   
  
  
  
 }, 
   
  
  
  
 { 
   
  
  
  
 values: sin2, 
   
  
  
  
 key: 'Another sine wave', 
   
  
  
  
 color: '#7777ff', 
   
  
  
  
 area: true //area - set to true if you want this line to turn into a filled area chart. 
   
  
  
  
 } 
   
  
  
  
 ]; 
   
  
  
  
}

 

C3.js

與 TauCharts 相同，C3.js 也是一個(gè)非常有效的基于 D3 的圖表可視化庫(kù)。另外，C3.js 允許用戶創(chuàng)建可定制的具有個(gè)人風(fēng)格的類。

C3.js 看起來(lái)是個(gè)比較難的庫(kù)，但是一旦掌握了 C3.js 技巧，就能得心應(yīng)手的使用了。

有了 C3.js 圖表庫(kù)，即使在***次渲染之后，用戶也可以通過(guò)創(chuàng)建回調(diào)來(lái)更新圖表。C3.js 也允許用戶為自己的 Web 應(yīng)用程序創(chuàng)建可復(fù)用的圖表，從而減少工作量。

使用 npm 安裝 C3.js 圖表庫(kù)：

npm install c3

C3.js 繪制組合圖的代碼示例：

  
 
 
 

   
  
  
  
var chart = c3.generate({ 
   
  
  
  
data: {  
   
  
  
  
columns: [  
   
  
  
  
['data1', 30, 20, 50, 40, 60, 50],  
   
  
  
  
['data2', 200, 130, 90, 240, 130, 220],  
   
  
  
  
['data3', 300, 200, 160, 400, 250, 250],  
   
  
  
  
['data4', 200, 130, 90, 240, 130, 220],  
   
  
  
  
['data5', 130, 120, 150, 140, 160, 150],  
   
  
  
  
['data6', 90, 70, 20, 50, 60, 120],  
   
  
  
  
],  
   
  
  
  
type: 'bar',  
   
  
  
  
types: {  
   
  
  
  
data3: 'spline',  
   
  
  
  
data4: 'line',  
   
  
  
  
data6: 'area',  
   
  
  
  
},  
   
  
  
  
groups: [  
   
  
  
  
['data1','data2']  
   
  
  
  
]  
   
  
  
  
}  
   
  
  
  
});

 

TauCharts

TauCharts 是最靈活的 JavaScript 圖表庫(kù)之一。它是基于 D3 創(chuàng)建的，是一個(gè)以數(shù)據(jù)為中心的 JavaScript 圖表庫(kù)，可以改進(jìn)數(shù)據(jù)可視化的效果。

TauCharts 十分靈活，訪問(wèn)其 API 也十分輕松。TauCharts 為用戶提供了無(wú)縫映射和可視化的數(shù)據(jù)，使用 TauCharts 能夠設(shè)計(jì)出十分美觀的數(shù)據(jù)界面。同時(shí)，TauCharts 也和易于學(xué)習(xí)。

通過(guò) npm 安裝 TauCharts：

  
 
 
 

   
  
  
  
npm install taucharts 
  
 
 
 

TauCharts 繪制水平線的代碼示例：

  
 
 
 

   
  
  
  
var defData = [ 
   
  
  
  
{"team": "d", "cycleTime": 1, "effort": 1, "count": 1, "priority": "low"}, {  
   
  
  
  
"team": "d",  
   
  
  
  
"cycleTime": 2,  
   
  
  
  
"effort": 2,  
   
  
  
  
"count": 5,  
   
  
  
  
"priority": "low"  
   
  
  
  
}, {"team": "d", "cycleTime": 3, "effort": 3, "count": 8, "priority": "medium"}, {  
   
  
  
  
"team": "d",  
   
  
  
  
"cycleTime": 4,  
   
  
  
  
"effort": 4,  
   
  
  
  
"count": 3,  
   
  
  
  
"priority": "high"  
   
  
  
  
}, {"team": "l", "cycleTime": 2, "effort": 1, "count": 1, "priority": "low"}, {  
   
  
  
  
"team": "l",  
   
  
  
  
"cycleTime": 3,  
   
  
  
  
"effort": 2,  
   
  
  
  
"count": 5,  
   
  
  
  
"priority": "low"  
   
  
  
  
}, {"team": "l", "cycleTime": 4, "effort": 3, "count": 8, "priority": "medium"}, {  
   
  
  
  
"team": "l",  
   
  
  
  
"cycleTime": 5,  
   
  
  
  
"effort": 4,  
   
  
  
  
"count": 3,  
   
  
  
  
"priority": "high"  
   
  
  
  
},  
   
  
  
  
{"team": "k", "cycleTime": 2, "effort": 4, "count": 1, "priority": "low"}, {  
   
  
  
  
"team": "k",  
   
  
  
  
"cycleTime": 3,  
   
  
  
  
"effort": 5,  
   
  
  
  
"count": 5,  
   
  
  
  
"priority": "low"  
   
  
  
  
}, {"team": "k", "cycleTime": 4, "effort": 6, "count": 8, "priority": "medium"}, {  
   
  
  
  
"team": "k",  
   
  
  
  
"cycleTime": 5,  
   
  
  
  
"effort": 8,  
   
  
  
  
"count": 3,  
   
  
  
  
"priority": "high"  
   
  
  
  
}];  
   
  
  
  
var chart = new tauCharts.Chart({  
   
  
  
  
data: defData,  
   
  
  
  
type: 'horizontalBar',  
   
  
  
  
x: 'effort',  
   
  
  
  
y: 'team',  
   
  
  
  
color:'priority'  
   
  
  
  
});  
   
  
  
  
chart.renderTo('#bar');

 

Recharts

ReCharts 是一個(gè)使用 React 構(gòu)建的，基于 D3 的圖表庫(kù)。

使用 ReCharts，用戶可以在 React Web 應(yīng)用程序中無(wú)縫地編寫圖表。

Recharts 非常輕巧，并使用 SVG 元素來(lái)創(chuàng)建很奇特的圖表。

使用 npm 安裝 Recharts：

  
 
 
 

   
  
  
  
npm install recharts 
  
 
 
 

Recharts 沒(méi)有冗長(zhǎng)的文檔，它很直接。當(dāng)你遇到困難時(shí)，使用 Recharts 可以很容易找到解決方案。

Recharts 創(chuàng)建自定義內(nèi)容樹圖的代碼示例：

  
 
 
 

   
  
  
  
const {Treemap} = Recharts; 
   
  
  
  
const data = [  
   
  
  
  
{  
   
  
  
  
name: 'axis',  
   
  
  
  
children: [  
   
  
  
  
{ name: 'Axes', size: 1302 },  
   
  
  
  
{ name: 'Axis', size: 24593 },  
   
  
  
  
{ name: 'AxisGridLine', size: 652 },  
   
  
  
  
{ name: 'AxisLabel', size: 636 },  
   
  
  
  
{ name: 'CartesianAxes', size: 6703 },  
   
  
  
  
],  
   
  
  
  
},  
   
  
  
  
{  
   
  
  
  
name: 'controls',  
   
  
  
  
children: [  
   
  
  
  
{ name: 'AnchorControl', size: 2138 },  
   
  
  
  
{ name: 'ClickControl', size: 3824 },  
   
  
  
  
{ name: 'Control', size: 1353 },  
   
  
  
  
{ name: 'ControlList', size: 4665 },  
   
  
  
  
{ name: 'DragControl', size: 2649 },  
   
  
  
  
{ name: 'ExpandControl', size: 2832 },  
   
  
  
  
{ name: 'HoverControl', size: 4896 },  
   
  
  
  
{ name: 'IControl', size: 763 },  
   
  
  
  
{ name: 'PanZoomControl', size: 5222 },  
   
  
  
  
{ name: 'SelectionControl', size: 7862 },  
   
  
  
  
{ name: 'TooltipControl', size: 8435 },  
   
  
  
  
],  
   
  
  
  
},  
   
  
  
  
{  
   
  
  
  
name: 'data',  
   
  
  
  
children: [  
   
  
  
  
{ name: 'Data', size: 20544 },  
   
  
  
  
{ name: 'DataList', size: 19788 },  
   
  
  
  
{ name: 'DataSprite', size: 10349 },  
   
  
  
  
{ name: 'EdgeSprite', size: 3301 },  
   
  
  
  
{ name: 'NodeSprite', size: 19382 },  
   
  
  
  
{  
   
  
  
  
name: 'render',  
   
  
  
  
children: [  
   
  
  
  
{ name: 'ArrowType', size: 698 },  
   
  
  
  
{ name: 'EdgeRenderer', size: 5569 },  
   
  
  
  
{ name: 'IRenderer', size: 353 },  
   
  
  
  
{ name: 'ShapeRenderer', size: 2247 },  
   
  
  
  
],  
   
  
  
  
},  
   
  
  
  
{ name: 'ScaleBinding', size: 11275 },  
   
  
  
  
{ name: 'Tree', size: 7147 },  
   
  
  
  
{ name: 'TreeBuilder', size: 9930 },  
   
  
  
  
],  
   
  
  
  
},  
   
  
  
  
{  
   
  
  
  
name: 'layout',  
   
  
  
  
children: [  
   
  
  
  
{ name: 'AxisLayout', size: 6725 },  
   
  
  
  
{ name: 'BundledEdgeRouter', size: 3727 },  
   
  
  
  
{ name: 'CircleLayout', size: 9317 },  
   
  
  
  
{ name: 'CirclePackingLayout', size: 12003 },  
   
  
  
  
{ name: 'DendrogramLayout', size: 4853 },  
   
  
  
  
{ name: 'ForceDirectedLayout', size: 8411 },  
   
  
  
  
{ name: 'IcicleTreeLayout', size: 4864 },  
   
  
  
  
{ name: 'IndentedTreeLayout', size: 3174 },  
   
  
  
  
{ name: 'Layout', size: 7881 },  
   
  
  
  
{ name: 'NodeLinkTreeLayout', size: 12870 },  
   
  
  
  
{ name: 'PieLayout', size: 2728 },  
   
  
  
  
{ name: 'RadialTreeLayout', size: 12348 },  
   
  
  
  
{ name: 'RandomLayout', size: 870 },  
   
  
  
  
{ name: 'StackedAreaLayout', size: 9121 },  
   
  
  
  
{ name: 'TreeMapLayout', size: 9191 },  
   
  
  
  
],  
   
  
  
  
},  
   
  
  
  
{ name: 'Operator', size: 2490 },  
   
  
  
  
{ name: 'OperatorList', size: 5248 },  
   
  
  
  
{ name: 'OperatorSequence', size: 4190 },  
   
  
  
  
{ name: 'OperatorSwitch', size: 2581 },  
   
  
  
  
{ name: 'SortOperator', size: 2023 },  
   
  
  
  
],  
   
  
  
  
} 
   
  
  
  
];  
   
  
  
  
const COLORS = ['#8889DD', '#9597E4', '#8DC77B', '#A5D297', '#E2CF45', '#F8C12D'];  
   
  
  
  
const CustomizedContent = React.createClass({  
   
  
  
  
render() {  
   
  
  
  
const { root, depth, x, y, width, height, index, payload, colors, rank, name } = this.props;  
   
  
  
  
return (  
   
  
  
  
  
   
  
  
  

   
  
  
  
x={x}  
   
  
  
  
y={y}  
   
  
  
  
width={width}  
   
  
  
  
height={height}  
   
  
  
  
style={{  
   
  
  
  
fill: depth < 2 ? colors[Math.floor(index / root.children.length * 6)] : 'none',  
   
  
  
  
stroke: '#fff',  
   
  
  
  
strokeWidth: 2 / (depth + 1e-10),  
   
  
  
  
strokeOpacity: 1 / (depth + 1e-10),  
   
  
  
  
}}  
   
  
  
  
/>  
   
  
  
  
{  
   
  
  
  
depth === 1 ?  
   
  
  
  

   
  
  
  
x={x + width / 2}  
   
  
  
  
y={y + height / 2 + 7}  
   
  
  
  
textAnchor="middle"  
   
  
  
  
fill="#fff"  
   
  
  
  
fontSize={14}  
   
  
  
  
>  
   
  
  
  
{name}  
   
  
  
  
  
   
  
  
  
: null  
   
  
  
  
}  
   
  
  
  
{  
   
  
  
  
depth === 1 ?  
   
  
  
  

   
  
  
  
x={x + 4}  
   
  
  
  
y={y + 18}  
   
  
  
  
fill="#fff"  
   
  
  
  
fontSize={16}  
   
  
  
  
fillOpacity={0.9}  
   
  
  
  
>  
   
  
  
  
{index + 1}  
   
  
  
  
  
   
  
  
  
: null  
   
  
  
  
}  
   
  
  
  
  
   
  
  
  
);  
   
  
  
  
}  
   
  
  
  
});  
   
  
  
  
const SimpleTreemap = React.createClass({  
   
  
  
  
render () {  
   
  
  
  
return (  
   
  
  
  

   
  
  
  
width={400}  
   
  
  
  
height={200}  
   
  
  
  
data={data}  
   
  
  
  
dataKey="size"  
   
  
  
  
ratio={4/3}  
   
  
  
  
stroke="#fff"  
   
  
  
  
fill="#8884d8"  
   
  
  
  
content={}  
   
  
  
  
/>  
   
  
  
  
);  
   
  
  
  
}  
   
  
  
  
})  
   
  
  
  
ReactDOM.render(  
   
  
  
  
,  
   
  
  
  
document.getElementById('container')  
   
  
  
  
);

 

Flot

目前，jQuery 已經(jīng)成為 Web 開發(fā)人員非常重要的工具。有了 Flot.js，前端設(shè)計(jì)也變得更加容易。

Flot.js 是 JavaScript 庫(kù)中較為古老的圖表庫(kù)之一。盡管如此，F(xiàn)lot.js 也不會(huì)因?yàn)槔L制折線圖、餅圖、條形圖、面積圖、甚至堆疊圖表而降低其性能。

Flot.js 有一個(gè)很完善的文檔。當(dāng)用戶遇到困難時(shí)，可以很容易地找到解決辦法。Flot.js 也支持舊版本的瀏覽器。

可以選擇不使用 npm 來(lái)安裝 Flot.js，而是在 HTML5 中包含 jQuery 和 JavaScript 文件。

Flot.js 的基本用法代碼示例：

  
 
 
 

   
  
  
  
$(function () { 
   
  
  
  
 var d1 = []; 
   
  
  
  
 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"), [ d1, d2, d3 ]); 
   
  
  
  
});

 

JavaScript 開發(fā)工具推薦

SpreadJS 純前端表格控件是基于 HTML5 的 JavaScript 電子表格和網(wǎng)格功能控件，提供了完備的公式引擎、排序、過(guò)濾、輸入控件、數(shù)據(jù)可視化、Excel 導(dǎo)入/導(dǎo)出等功能，適用于 .NET、Java 和移動(dòng)端等各平臺(tái)在線編輯類 Excel 功能的表格程序開發(fā)。

總結(jié)

以上介紹的 JavaScript 庫(kù)都是高質(zhì)量的圖表庫(kù)。但是在學(xué)習(xí)這些庫(kù)的過(guò)程中，可能會(huì)因?yàn)閷W(xué)習(xí)曲線陡峭或是缺乏學(xué)習(xí)資料而遇到困難，一種很好的方案是將這些庫(kù)結(jié)合起來(lái)使用。***也歡迎大家補(bǔ)充更多的 JavaScript 圖表庫(kù)。

責(zé)任編輯：龐桂玉
來(lái)源： 今日頭條 前端 Javascript 圖表庫(kù)

本文名稱：前端開發(fā)者常用的9個(gè)JavaScript圖表庫(kù)
文章鏈接：http://www.dlmjj.cn/article/dhcsjss.html