当前，前端数据可视化已经成为数据科学领域非常重要的表库一部分。不同网络系统中产生的前端数据，都需要经过适当的表库可视化处理，以便更好的前端呈现给用户读取和分析。

对任何一个组织来说，表库如果能够充分的前端获取数据、可视化数据和分析数据，表库那么就能很大程度上帮助了解数据产生的前端深层次原因，以便据此做出正确的表库决定。

对于前端开发人员来说，前端如果能够掌握交互式网页中的表库数据可视化技术，则是前端一项很棒的技能。当然，表库通过一些 JavaScript 的前端图表库也会使前端的数据可视化变得更加容易。使用这些库，开发者可以在无需考虑不同的语法所带来的编程难题的情况下，轻松实现将数据转化为易于理解的图表。网站模板

下面是挑选出的9个 JavaScript 图表库：

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

Chart.js

Chart.js 是一种简洁、用户友好的图表库，同时也是基于 HTML5 的 JavaScript 库，用于创建动画、交互式和可自定义的图表和图形。

借助 Chart.js，用户可以轻松直观地查看混合图表类型。默认情况下，也可以使用 Chart.js 创建响应式网页。

Chart.js 库允许用户快速创建可视化数据。Chart.js 易于设置，对初学者十分友好。使用 Chart.js 则不必考虑浏览器的兼容性问题，因为 Chart.js 支持旧浏览器。

使用 npm 安装 Chart.js：

npm install chart.js --save 

Chart.js 绘制雷达图的代码示例：

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 库很适合于创建美观、响应能力强、阅读友好的图表。Chartist 使用 SVG 来呈现图表。

Chartist 还提供了使用 CSS 媒体查询和创意动画来自定义图表的能力。用户使用 Chartist 在图表设计中实现自己的所有创意。

Chartist 易于配置，服务器租用也易于使用 Sass 进行定制。但是，它不支持旧浏览器。

使用 Chartist，可以通过 CSS 的样式来美化你的 SVG，用户完全可以现实自己所想的所有图表样式。

使用 npm 安装 Chartist：

npm install chartist --save 

Chartist 创建具有自定义标签的饼图的代码示例：

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，可轻松的将表格数据可视化为业务图表。FlexChart 不但支持常见的图表类型，如折线图、饼状图、面积图等，还支持气泡图、K线图、条形图、漏斗图等高级图表类型。

FlexChart 的使用也十分简单，FlexChart 图表将所有与数据有关的任务都委托给 CollectionView 类，只需操作 CollectionView 类，就能实现过滤、云南idc服务商排序和分组数据等功能。

FlexChart 包含的图表元素也比较全面，如图表图例、图表标题、图表页脚、数轴、图表 series 和标签等，用户也可以为图表添加自定义的元素，如平均线和趋势线等。

FlexChart 本质上是一种交互式的图表，不论是数据进行任何的更改，都会自动反应在图表上，如图表曲线随数据放大缩小、过滤、钻取、动画等。

查看 FlexChart 的中文学习指南和旭日图Demo。

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 是网页的数据可视化方面的一个非常有用的库。使用 Echarts，开发者可以创建直观的、可自定义的交互式图表，让数据的展示和分析变得十分容易。

由于 Echarts 是用普通的 JavaScript 编写的，所以 Echarts 不存在其它图表库存在的无法无缝迁移的问题。

同时，Echarts 也提供了很多官方文档供用户查看。

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

npm install echarts --save 

Echarts 绘制散点图代码示例：

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 库。NVD3 允许用户在 Web 应用程序中创建美观的、可复用的图表。

NVD3 具有很强大的图表功能，能够很方便的创建箱形图、旭日形和烛台图等。如果用户想在 JavaScript 图表库中用到大量的能力，推荐试用 NVD3。

NVD3 图表库的速度有时可能会成为一个问题，与 Fastdom 安装配合使用，速度会更快。

NVD3 绘制简单的折线图代码示例：

<pre style="box-sizing: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 16px; white-space: pre-wrap; overflow: auto; border-radius: 3px; padding: 2px; line-height: 1.4; word-wrap: normal; display: block; background: rgb(63, 63, 63); color: rgb(220, 220, 220); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">/*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 <svg> element you want to render the chart in.   .datum(myData) //Populate the <svg> element with chart data...  .call(chart); //Finally, render the chart!  //Update the chart when window resizes.  nv.utils.windowResize(function() {  chart.update() });  return chart; }); /

很赞哦!（2）