分享10+可视图表库, 助你轻松制作精美可视化大屏

Introduction

In the development of visualization projects, chart libraries are often involved. Many impressive reports and dashboards utilize a variety of charts. This article shares some popular open-source and free chart libraries.

Source: Qu Tan Frontend public account

GitHub: https://github.com/MrXujiang

1. D3.js

D3.js, short for Data-Driven Documents, is a JavaScript-based chart library that simplifies the process of creating complex visualizations. It allows developers to create stunning graphics from simple data inputs.

Example usage for a bar chart:

chart = BarChart(alphabet, {
  x: d => d.letter,
  y: d => d.frequency,
  // ...other configurations
})

GitHub: https://github.com/d3/d3

2. ApexCharts

ApexCharts is a sleek SVG chart library with wrappers for Vue and React. It's MIT licensed, making it suitable for both commercial and non-commercial projects.

Features:

• Analysis radar
• Statistical analysis

GitHub: https://gitee.com/mirrors/ApexChartsJS

3. Chart.js

Chart.js is an immensely popular open-source library that allows for the creation of responsive charts using HTML5 Canvas. It supports mixed chart types and is flexible and lightweight.

Example configuration:

const config = {
  type: 'bar',
  data: data,
  // ...other configurations
};

GitHub: https://github.com/chartjs/Chart.js

4. AntV

AntV is a set of data visualization principles derived from the Ant Design system. It emphasizes accuracy, clarity, effectiveness, and aesthetics.

GitHub: https://github.com/antvis

5. Echarts

Apache ECharts is an open-source JavaScript library with a vast array of visualization charts, including 3D components.

GitHub: https://github.com/apache/echarts

6. Nivo

Nivo, based on D3 and React, offers a variety of customizable chart components with three rendering options: Canvas, SVG, and HTML.

Example import:

import { ResponsiveBar } from '@nivo/bar'

GitHub: https://github.com/plouc/nivo

7. dygraphs

Dygraphs is an open-source JavaScript library for creating interactive, zoomable time series charts.

GitHub: https://github.com/danvk/dygraphs

8. Protovis

Protovis is a visualization tool for creating JavaScript charts, such as bubble charts.

Example code:

/* Code for creating a Protovis chart */

GitHub: https://github.com/protovis

9. Recharts

Recharts is designed with React, offering a different experience in chart composition and configuration.

GitHub: https://github.com/recharts/recharts

10. frappe-charts

Frappe Charts is a lightweight, open-source chart library that works well with frameworks like Vue and React.

Chart examples:

• Pie chart
• Percentage chart
• Heatmap
• Double bar chart

GitHub: https://github.com/frappe/charts

The article concludes with an encouragement to share, like, and bookmark if the content was helpful, and a list of additional resources on visualization platforms and tools.

测试开发之前端篇-Web前端简介

了解更多

想要了解更多内容？

查看原文：分享10+可视图表库, 助你轻松制作精美可视化大屏

文章来源：

趣谈前端

扫码关注公众号