前端耕耘者常用的9个js图表库

前端常用的9个js图表库

现如今，数据的可视化，已经成为数据科学领域的重要组成部分，在不同的条件下产生的数据，都需要经过适当的可视化处理，以便更好地给用户读取和分析。

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

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

使用 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，可轻松的将表格数据可视化为业务图表。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',
    s