React 与 可视化
一般会想到 canvas 和 svg ;
svg更适合画图, 但由于cavans在移动端的良好兼容性, 使用的更广;
什么是svg, scalable vector graphics 全称 可缩放矢量图形, 是一种来描述二维矢量图形的xml语言
canvas 能做的 svg基本都可以做, 字体图标, icon, logo 也能作
在ie上也是从ie9开始兼容svg的. 旧浏览器 vml技术, vml类似svg, react 15对svg支持比较完善
echarts选择的是canvas, highcharts选择的是svg, 由于svg的矢量特性, 绘制图形 svg更合理 而且有优势
canvas 支持的库 react-canvas, 这个库主要来生成各类功能的自定义canvas标签
讲到svg, 因为他的表现方式更贴近react使用原生和自定义标签构建组件化的思路, svg嵌套和自定义属性来得到想要的图形
虽然svg性能不太好, 但为什么要选择
我们常见的image sprite 有高清屏幕的兼容问题, 需要做几套图片来兼容, 而svg不存在这个问题
当图标小于16px, 或者图标比较复杂时, 往往会出现图片无法显示清晰的问题,
虽然iconfont能够自动适应个屏幕的分辨率, 但不能解决上面的清晰问题
React 与 可视化的更多相关文章
- react 地图可视化 cesium 篇
Vue Function-based API RFC 一出来,感觉 vue 越来越像 react 了.新立项目,决定尝试下 react.js.下面是 react 集成 cesium,核心部分是 web ...
- 【使用指南】WijmoJS 前端开发工具包
为方便广大前端开发人员更好的使用 WijmoJS 前端开发工具包,葡萄城专门推出了 WijmoJS 使用指南,该指南详细地介绍了如何把 WijmoJS 各种强大的功能应用到您自己的 Web 项目中,助 ...
- 在 React 项目中引入 GG-Editor 编辑可视化流程
蚂蚁金服数据可视化团队曾经开源了一款G6-Editor,但后来停止了对外支持,学习成本太高 好在后来他们团队的大牛高力结合 React + G6 开源了一个 GG-Editor(其实就是G6-Edit ...
- React 可视化开发工具 Shadow Widget 非正经入门(之五:指令式界面设计)
本系列博文从 Shadow Widget 作者的视角,解释该框架的设计要点.本篇解释 Shadow Widget 中类 Vue 的控制指令,与指令式界面设计相关. 1. 指令式界面设计 Vue 与 A ...
- React 可视化开发工具 Shadow Widget 非正经入门(之六:markdown)
本系列博文从 Shadow Widget 作者的视角,解释该框架的设计要点.本篇讲解 Markdown 在 Shadow Widget 中的应用. Markdown 在 Shadow Widget 中 ...
- React 可视化开发工具 shadow-widget 的非可视开发方法
Shadow Widget 提倡在可视设计器中开发用户界面,输出转义标签,而非 JSX.许多童鞋可能不知道 SW 同样支持用 JSX 设计界面,开发体验比原生 React 编程好出很多,本文就介绍这方 ...
- react 可视化编辑器1
可视化编辑器1 前言 前面我们学习低代码,例如百度的低代码平台 amis,也有相应的可视化编辑器,通过拖拽的方式生成配置文件.就像这样 笔者自己也有类似需求:比如中台有个归档需求,通过选择一些配置让后 ...
- react+echarts/g2/bizcharts可视化图表
一.echarts的折线图的使用demo如下,linecharts为实例化的封装组件,line为实际应用的组件 cnpm install echarts import React from 'reac ...
- webpack+react实现echarts可视化配置
先上效果 开发环境要求 需要事先安装node及npm 前期准备 1.创建文件夹react-echarts-editor2.在项目根目录(以下称根目录)下创建src目录3.在项目根目录下创建dist目录 ...
随机推荐
- Kafka学习之(四)PHP操作Kafka
简单测试 环境:Centos6.4,PHP7,kafka服务器IP:192.168.9.154,PHP服务器:192.168.9.157 在192.168.9.157创建目录和文件. //生产者 &l ...
- oracle错误一览表
ORA-00001: 违反唯一约束条件 (.)ORA-00017: 请求会话以设置跟踪事件ORA-00018: 超出最大会话数ORA-00019: 超出最大会话许可数ORA-00020: 超出最大进程 ...
- 20145309《Java程序设计》第八周学习总结
日志 •java.util.logging包提供了日志功能相关类与接口,使用日志的起点是logger类,Logger类的构造函数标示为protected,不是java.util.logging同包的类 ...
- DCU项目总结
1.什么是DCU 在某些基站无法覆盖的地方,如大型体育馆内部1楼.2楼..,此时通过DCU为这些地方提供信号 2.DCU组成 3.我们需要做的 PC通过进入UMPT网关,在一个网页中使用自定义指令集控 ...
- JS输出表格头上的文字内容
Array.from(document.querySelectorAll("#tb1 tr .cell")).map(it=>it.innerText)
- git 总结命令
git 命令 创建git版本库:git init 查看状态:git status 把文件添加到暂存区:git add 把文件提交到版本库:git commit -m "提交说明" ...
- linux下如何使用自己安装的SunJDK替换默认的OpenJDK
在linux系统中,由于涉及到版权问题,在大部分linux系统的发行版本中,默认都安装了OpenJDK,并且OpenJDK的java命令也已经加入到环境变量中了. 在刚装好的linux系统中,运行ja ...
- POJ2503 STL map用法
2017-08-21 15:42:01 writer:pprp 除了用到map以外,输入也是一个问题 用到了sscanf详情请看上一篇博客 /* theme:第一章 - 分治算法 name: POJ ...
- 链表中的倒数第k个结点
题目描述 输入一个链表,输出该链表中倒数第k个结点. 基本思想:定义两个指针a,b分别指向头节点, a指针先向前走k-1步(注意:因为倒数节点是从倒数第一个结点开始的,而不是零),然后a指针和b指 ...
- 生产消费模式:多线程读写队列ConcurrentQueue
需求:现需要将多个数据源的数据导入到目标数据库,这是一个经典的生产消费应用的例子. 直接上代码,看下实现: // 初始化列队缓冲区 队列大小为100 IDataCollection<List&l ...