时间 2019-04-28 07:47:36 SegmentFault
原文
主题 React Native JavaScript 数据可视化
React Native 组件库
1. NativeBase https://github.com/GeekyAnts/NativeBase
超过 10k stars 和 1k fork,NativeBase 是一个广受欢迎的 UI 组件库, 它为 React native 提供了几十个跨平台组件. 当使用 NativeBase 时, 你可以使用任何现成的本地第三方库, 并且项目本身围绕着它提供了丰富的生态系统, 从有用的 starter-kit 到 可定制的主题模板 https://nativebase.io/nativebase-customizer . 这是一个不错的入门工具包.
2. React Native Elements
在超过 1 5k 的 stars ,react-native-elements 是一个高度可定制的跨平台 UI 工具包, 完全用 JavaScript 构建. 其作者声称 "React Native Elements 的想法更多的是关于组件结构而不是实际设计, 这意味着在设置某些元素时可以更少的样板, 但可以完全控制它们的设计", 这应该使它对新开发人员和经验丰富的老手都很有吸引力. 这是一个示例 Expo 应用程序 , 显示了所有正在运行的组件.
3. Shoutem https://shoutem.github.io/ui/
超过 4 k stars 的 Shoutem 是一个 React Native UI Kit, 由 UI 组件 https://github.com/shoutem/ui , 主题 https://github.com/shoutem/theme 和 组件动画 https://github.com/shoutem/animation 三部分组成. 该库为 iOS 和 Android 提供了一组跨平台组件, 所有组件都是可组合和可定制的. 每个组件还具有与其他组件一致的预定义样式, 这使得无需手动定义复杂样式就可以构建复杂组件.
4.UI Kitten https://github.com/akveo/react-native-ui-kitten
超过 3 k stars 的 UI Kitten 提供了一个可定制和可重用的 react-native 组件工具包, 该工具包基于将样式定义移动到特定位置的概念, 使组件可重用, 并以一种单一的方式设计样式. 通过传递一组不同的变量, 可以很容易地动态更改主题. 这里有一个不错的 Expo 事例 https://expo.io/@akveo/ui-kitten-explorer-app , 可看看.
5. React Native Material UI
超过 2 k stars 的库, 带有一组可高度定制的 UI 组件, 实现了 Google's material design. 注意, 库使用了一个名为 uiTheme 的 JS 对象, 该对象通过上下文传递, 以获得最大的可定制性. 默认情况下, 这个 uiTheme 对象基于你可以在这里找到的 lightTheme .
6. React Native Material Kit
虽然在 NPM 上 发布于 2017 年 12 月, 但这个 4k stars 的库仍然值得一提, 它有一套基本但有用的 UI 组件和主题, 用于实现 Google 的 MD. 为什么? 因为它简单, 实用且对兼容较好. 但由于维护相对较少, 请谨慎使用.
7. Nachos UI https://github.com/nachos-ui/nachos-ui
超过 1.5k stars 的 Nachos UI 是一个 React Native 组件库, 拥有 30 多个可定制组件, 多亏了 https://github.com/necolas/react-native-web , 这些组件也可以在 Web 上工作.
8. React Native UI Library https://github.com/wix/react-native-ui-lib
Wix engineering 正在开发这个最先进的 UI 工具集和 React native ( )组件库, 它还支持 https://github.com/oblador/react-native-animatable 和 开箱即用. 库附带一组预定义的样式预置(转换为修饰符), 包括颜色, 排版, 阴影, 边框半径等.
9. React Native Paper https://github.com/callstack/react-native-paper
超过 3K stars 的 React Native Paper 是一个跨平台的 UI 组件库, 它遵循了 material design 指南, 支持 全局主题化 , 还有一个可选的 babel-plugin 来减小模块大小. 下面是一个 Expo 示例应用程序 , 可以帮助你快速了解这个库.
10. React Native Vector Icons
超过 10k stars 的库是 React Native 的一组可自定义图标, 支持 NNavBar/TabBar/ToolbarAndroid,, 图像源和完整样式. 不出所料, 它非常有用, 并被数千个应用程序以及其他 UI 组件库 (如 react-native-paper) 使用. 该库提供了开箱即用的预制捆绑图标集, 以下是库中 所有图标的完整示例 .
11. Teaset https://github.com/rilyu/teaset
超过 1.35 stars 的 Teaset 是一个 UI 库, 用于 react native, 包含 20 多个纯 JS(ES6)组件, 专注于内容显示和动作控制. 文档很少(但很全), 它的简单性和设计吸引了我的眼球.
JavaScript 数据可视化库
1. D3js https://github.com/d3/d3
超过 80k 的 star 的 D3.JS 可能是最流行和最广泛的 JavaScript 数据可视化库. D3 用于基于数据操纵文档, 并使用 html,SVG 和 CSS 实现数据. D3 对 Web 标准的强调为你提供了现代浏览器的功能, 而无需耦合到专有框架, 将可视化组件和数据驱动的 DOM 操作方法结合在一起. 它允许你将任意数据绑定到文档对象模型(DOM), 然后将数据驱动转换应用到文档. 这里有一个很好的例子库 https://github.com/d3/d3/wiki/Gallery .
2. ChartJS https://github.com/chartjs/Chart.js
一个非常受欢迎的 (40k 星) 开源 HTML 5 图表库, 使用 canvas 元素的响应式 Web 应用程序. V.2 提供了混合图表类型, 新的图表轴类型和漂亮的动画. 设计简单而优雅, 有 8 种基本图表类型, 你可以将库与 moment.JS 组合用于时间轴.
3. ThreeJS https://github.com/mrdoob/three.js
这个非常受欢迎的库 (超过 45K 星; 1K 贡献者) 使用 WebGL 创建 3d 动画. 该项目的灵活性和抽象性意味着它对于可视化 2 维或 3 维数据也很有用. 例如, 你也可以使用此指定模块通过 WebGL 进行 3D 图形可视化, 或者尝试 使用此在线游乐场 .
4. Echarts & Highcharts https://github.com/apache/incubator-echarts
百度的 Echarts 项目 (超过 30k stars) 是一个用于浏览器的交互式图表和可视化库. 它是用纯 JavaScript 编写的, 基于 https://github.com/ecomfe/zrender canvas 库. 它支持 Canvas,SVG(4.0+)和 VML 格式的渲染图表. 除了 PC 和移动浏览器, echart 还可以与 node-Canvas 一起使用, 实现高效的服务器端渲染(SSR).
Highcharts JS https://github.com/highcharts/highcharts 是超过一个 8K stars 基于 SVG 图表库, 支持 VML 和旧浏览器的 canvas. 它声称全球 100 家最大的公司中有 72 家使用 eb, 这使得它 (可能) 成为世界上最流行的 JS 图表 API (Facebook,Twitter).
5. Metric-Graphics
MetricsGraphics.j (7k stars)是一个用于可视化和显示时间序列数据的优化库. 它相对较小(80kb 压缩), 提供了精密且优雅的线形图, 散点图, 直方图, 条形图和数据表的选择, 以及密度图和基本线性回归等特性. 这里有一个到交互式示例库的链接 https://metricsgraphicsjs.org/examples.htm .
6. Recharts https://github.com/recharts/recharts
Recharts 是一个使用 React 和 D3 构建的图表库, 支持声明式 React 组件方式. 该库提供了原生 SVG 支持, 轻量级依赖树 (D3 子模块) 通过组件 props 高度可定制. 你可以在文档网站上找到更多的例子.
7. Raphael https://github.com/DmitryBaranovskiy/raphael
一个 10k stars 的 JavaScript 向量库, 用于处理 Web 中的向量图形. 该库使用 SVG W3C 推荐标准和 VML 作为创建图形的基础, 因此每个图形对象也是一个 DOM 对象, 你可以附加 JavaScript 事件处理程序. Raphael 目前支持 Firefox 3.0+,Safari 3.0+,Chrome 5.0+,Opera 9.5 + 和 Internet Explorer 6.0+.
8. C3js https://github.com/c3js/c3
8k stars 的 C3js 是一个基于 D3 的可重复使用的图表库, 用于 Web 应用程序. 该库为每个元素提供类, 因此你可以通过类定义自定义样式, 并通过 D3 直接扩展结构. 它还提供了各种 API 和回调来访问图表的状态. 通过使用它们, 你甚至可以在渲染后更新图表, 看看这些例子 https://c3js.org/examples.html .
9. React Virtualized + React Vis + Victory
[React-vis] 45 是优步的一套 React 组件, 用于以一致的方式显示数据, 包括线 / 面 / 条形图, 热图, 散点图, 等高线图, 六边形热图等等. 该库不需要任何先前的 D3 或任何其他数据库的知识, 并提供低级模块化构建块组件, 如 X/Y 轴.
React virtualized https://github.com/bvaughn/react-virtualized (12k stars)是一组 React 组件, 用于高效地渲染大型列表和表格数据. 每个发行版都提供 ES6,CommonJS 和 UMD 构建, 并且该项目支持 Webpack 4 工作流. 请注意 react, 为了避免版本冲突, 必须将 react-dom 指定为对等依赖项.
Victory https://github.com/FormidableLabs/victory 是一个收集 React 可组合组件的集合, 用于构建交互式数据可视化, 由强大的实验室构建, 拥有超过 6k stars Victory 对 Web 和 React Native 应用程序使用相同的 API, 以便于跨平台制图. 一种优雅而灵活的方式, 可以利用 React 组件来支持实际的数据可视化.
10. Raw graphs https://github.com/densitydesign/raw
超过 5K stars 的 Raw 是电子表格和数据可视化之间的连接链接, 用于在 d3.JS https://github.com/mbostock/d3 库之上创建基于矢量的自定义可视化. 它可以处理表格数据(扩展列表和逗号分隔值), 也可以处理来自其他应用程序的复制粘贴文本. 基于 SVG 格式, 可以使用向量图形应用程序编辑可视化, 以便进一步改进, 或者直接嵌入到 Web 页面中.
11. Metabase https://github.com/metabase/metabase
超过 11k 的 stars Metabase 中, 使用 SQL 创建数据仪表板是一种非常快速和简单的方法, 不需要知道 SQL(但是对于分析人员和数据专业人员使用 SQL 模式). 你可以创建规范段和度量, 将数据发送到 Slack(并使用 MetaBot 在 Slack 中查看数据)等等. 这可能是为你的团队在内部可视化数据的一个很好的工具, 尽管可能需要进行一些维护.
来源: http://www.tuicool.com/articles/JbABvuv