前端开发者常用的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 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 类，就能实现过滤、排序和分组数据等功能。

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;
  }
}

web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的