常用的9个JavaScript图表库详解

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

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

对于前端开发人员来说，如果能够掌握交互式网页中的数据可视化技术，则是一项很棒的技能。当然，通过一些 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 ctx = document.getElementById("myChart");
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，用户完全可以现实自己所想的所有图表样式。