图表库"/>
前端耕耘者常用的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 notificationsvar data = new wijmo.collections.CollectionView(getData());// create the chartvar theChart = new wijmo.chart.FlexChart('#theChart', {itemsSource: data,bindingX: 'country',s
更多推荐
前端耕耘者常用的9个js图表库
发布评论