Abstract:
In the big data era, we often need to display data statistics reports on webpages to intuitively understand the data trend. Developers often need to use charts to present some data. With the development of web technology, from traditional SVG, which can only rely on flash and ie vml, to HTML5 technology represented by standardized canvas and SVG, the technology of performance points, lines, and surface elements has become more and more standardized and mature. I divided the front-end data visualization into five types:
- Chart
- Graph
- Map
- Relationship Diagram
- Stereoscopy
I will introduce 64 front-end visualization plug-ins in order, and I will share 34 Chart plug-ins below
- Amcharts
URL: http://www.amcharts.com/
Browser: IE6 +, chrome, Safari, Firefox, opear
Resume: amcharts is an advanced chart library that suits any data visualization needs. Chart solutions include columns, columns, lines, areas, one-step, one-step without sp, smoothing lines, Candle Holders, ohlc, pie/donut, radar/polar, XY/dispersion/foam, bullet, funnel/pyramid chart, and indicator.
- Awesomechartjs
URL: http://cyberpython.github.io/AwesomeChartJS/
GitHub: https://github.com/cyberpython/AwesomeChartJS
Browser: Modern Browser
Resume: awesomechartjs is a simple JavaScript library that can be used to create charts based on HTML 5 Canvas elements.
- Axiis
URL: http://www.axiis.org/
Browser: Not officially stated
Resume: The axiis framework is an open-source data visualization designed for beginners and expert developers.
- Bonsaijs
URL: http://bonsaijs.org/
GitHub: https://github.com/uxebu/bonsai
Browser: ie9 +, chrome20 +, safari5 +, firefox18 +, opear12 +
Resume: JS library used to create graphics and animations
- Canvasjs
URL: http://canvasjs.com
Browser: Not officially stated
Resume: Creates a chart on the canvas using HTML5 and Javascript. The chart contains several nice themes and 10 times faster than the traditional Flash/SVG-based library-resulting in lightweight, beautiful and responsive dashboard. Billing
- Canvasxpress
URL: http://canvasxpress.org/
Browser: Firefox 1.5 +, opera 9 +, Safari 3.x+, chrome 1.0 +, ie 6 +
Resume: canvasxpress is an independent JavaScript graphics library that supports computers and mobile devices in all mainstream browsers.
- Chartist
URL: http://gionkunz.github.io/chartist-js/
GitHub: https://github.com/gionkunz/chartist-js
Browser: Firefox, chrome, Safari, opera, ie9 +
Resume: a library for drawing multiple types of images
- Chartjs
URL: http://www.chartjs.org/
GitHub: https://github.com/nnnick/Chart.js
Browser: ie9 +, chrome, Safari, Firefox, opear, partially supports IE7/8
Resume: chartjs is a library that can draw multiple types of charts. It uses the canvas Technology of HTML5.
- Chartkick
URL: http://ankane.github.io/chartkick/
GitHub: https://github.com/ankane/chartkick
Browser: IE6 +, chrome, Safari, Firefox, opear
Resume: chartkick is a JS library that relies on Ruby to draw charts. It can also be used in Python.
- Datawrapper
URL: https://datawrapper.de/
GitHub: https://github.com/datawrapper/datawrapper
Browser: supports most browsers
Resume: datawrapper is free and open-source. You can use their free host service or install it on your own server. Datawrapper is written in PHP, which is easy to install, modify, and expand. Can be drawn. However, datawrapper generates charts and embeds them into the site.
- Dataset
URL: http://misoproject.com/dataset/
GitHub: https://github.com/misoproject/dataset
Browser: Not officially stated
Resume: DataSet is a javascript client data conversion and Management Library. The data of the dataset management client is used to load, parse, sort, query, and manipulate data from various data sources.
- DC
URL: http://dc-js.github.io/dc.js/
GitHub: https://github.com/dc-js/dc.js
Browser: Not officially stated
Resume: a database specially optimized to explore large and multi-dimensional datasets.
- Dygraphs
URL: http://dygraphs.com/
Browser: IE8 +, chrome, Safari, Firefox, opear
Resume: dygraphs is a fast and flexible open-source JavaScript library chart.
- Echart
URL: http://echarts.baidu.com/index.html
GitHub: https://github.com/ecomfe/echarts
Browser: ie9 +, chrome, Safari, Firefox, opear
Resume: a canvas-based, pure JavaScript chart library that provides intuitive, vivid, interactive, And customizable data visualization charts. The innovative drag-and-drop re-computing, data view, value-range roaming and other features greatly enhance the user experience and give users the ability to mine and integrate data.
- Flotr2
URL: http://www.humblesoftware.com/flotr2/
GitHub: https://github.com/HumbleSoftware/Flotr2
Browser: FF, chrome, IE6 +, Android, IOS
Resume: flotr2 is the HTML5 chart and graphics library. Line chart, line chart, wax chart, pie chart, and bubble chart can be drawn.
- Flot
URL: http://www.flotcharts.org/
Browser: Internet Explorer 6 +, chrome, Firefox 2 +, Safari 3 + and opera 9.5 +
Resume: A jquery-Based Drawing Library that can draw line, scatter, bar, and pie charts.
- Fusioncharts
URL: http://www.fusioncharts.com/
Browser: IE6 +, chrome, Safari, Firefox, opear
Resume: A library used to draw more than 90 charts.
- Graphael
URL: http://g.raphaeljs.com/
Browser: Firefox 3.0 +, Safari 3.0 +, opera 9.5 + and Internet Explorer 6.0 +
Resume: a plug-in that can draw various charts, and is very simple and flexible.
- Highchart
URL: http://www.highcharts.com/
GitHub: https://github.com/highslide-software/highcharts.com/
Browser: supports various devices, including IE6 +
Resume: Use SVG in a browser of a higher version, and use a backup VML in earlier ie versions (including IE6 and later versions. Have their own team responsibility, but only for non-commercial purposes free of charge, you can draw line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types
- Humble Finance
URL: http://www.humblesoftware.com/finance/index
Browser: Firefox, Safari, chromium, or IE6 +
Resume: humblefinance is an HTML5 data visualization tool similar to flash. It is completely written in Javascript using prototype and flotr library.
- Ichartjs
URL: http://www.ichartjs.com/
GitHub: https://github.com/wanghetommy/ichartjs
Browser: ie9 +, chrome, Safari, Firefox, opear
Resume: ichartjs is an HTML5-based graphics library. Use the pure JavaScript language and the canvas label of html5. Ichartjs is committed to providing simple, intuitive, and Interactive Graphic components for your applications. Ichartjs currently supports pie chart, ring chart, line chart, Area Chart, column chart, and bar chart.
- Icharts
URL: http://www.icharts.net/
Browser: Not officially stated
Resume: the free version of icharts provides some basic interactive chart styles. If you want to use advanced Styles, you need to purchase the advanced version.
- Javascript infovis Toolkit
URL: http://philogb.github.io/jit/
GitHub: https://github.com/philogb/jit
Browser: the official version is not provided.
Resume: javascript infovis Toolkit can dynamically draw a variety of images, providing some preset styles for displaying different data
- Jqplot
URL: http://www.jqplot.com/
Browser: IE 7 +, Firefox, Safari, and opera
Resume: jquery-Based Drawing plug-in that can draw line, bar, scatter, pie chart
- Jscharts
URL: http://www.jscharts.com/
Browser: Firefox 1.5 +, chrome 10 +, Internet Explorer 8 +, Safari 3.1 +, and opera 9 +
Resume: jscharts is a javascript-based chart generator that requires little or no encoding. Drawing charts using jscharts is a simple and easy task because you only need to use client scripts (that is, Web browsers ). No additional plug-ins or server modules are required. This includes our scripts. Prepare the XML, JSON, or Javascript arrays of your chart data and your table! You can create a bar chart, a pie chart, or a simple line chart. Free version.
- Kendo-UI
URL: http://www.telerik.com/kendo-ui
GitHub: https://github.com/telerik/kendo-ui-core
Browser: Modern Browser
Resume: http://www.cnblogs.com/xiyangbaixue/p/3951297.html
- Nvd3
URL: http://nvd3.org/
GitHub: https://github.com/novus/nvd3
Browser: chrome, Firefox, opera, Safari and Internet Explorer 10
Resume: D3 chart Library
- Pizza-pie-charts
URL: http://zurb.com/playground/pizza-pie-charts
GitHub: https://github.com/zurb/pizza
Browser: Not officially stated
Resume: Mainly used to generate a pie chart Library
- Protovis
URL: http://mbostock.github.io/protovis/
GitHub: https://github.com/mbostock/protovis
Browser: Modern Browser
Resume: data in a custom view composed of protovis uses simple flags such as bars and points. With a low-level graphics library, it quickly becomes boring to Visualize. protovis is defined to allow inheritance, scale, and layoutsto to simplify construction by encoding the dynamic attributes of data.
- Peity
URL: http://benpickles.github.io/peity/
Browser: chrome, Firefox, ie9 +, opera, Safari
Resume: multiple images can be drawn, but all of them are small ones, similar to jquery sparklines.
- Rgraph
URL: http://www.rgraph.net/
Browser: Modern Browser
Resume: rgraph is an open web chart and chart Library Based on html5. Rgraph creates these charts using JavaScript in a Web browser, which means faster page and web server load, resulting in smaller page sizes and faster websites.
- Webfx
URL: http://webfx.eae.net/
Browser: Firefox 1.5, opera 9 and Internet Explorer 6
Resume: a database that supports multiple charts
- Xcharts
URL: http://tenxer.github.io/xcharts/
GitHub: https://github.com/tenXer/xcharts/
Browser: Modern Browser
Resume: xcharts beauty is a javascript library used to build and customize data-driven Web visualization using d3.js charts. With HTML, CSS, and SVG, xcharts is designed to be dynamic, fluid, integrated, and customized.
- Zingchart
URL: http://www.zingchart.com/
Browser: Not officially stated
Resume: zingchart provides flexibility and resources to create amazing visualization. It provides over 100 chart types with unique features such as scaling and interaction.
Summary:
Each plug-in has its own merits. Different plug-ins are selected based on project requirements. It is widely used, such as echart (Baidu product) and highchart. I will share the map plug-in later.
Front-end data visualization plug-in (I) Charts
