学习日记 » html

两个工具帮你实现酷炫的数据可视化

admin — Tue, 17 Apr 2018 06:56:23 +0000

你想到的数据可视化，通常可能是这样的：

但我们能实现的数据可视化，不仅是上面那样的，还可以是这样的：

这样的：

以及这样的：

如此高端大气酷炫的数据可视化是如何实现的？

秘诀在于两个工具——inMap & iView

（都是开源项目，下载代码即可使用，完全免费！）

inMap

inMap是TalkingData可视化团队开源的一款基于 Canvas 的大数据可视化库，专注于大数据方向的散点、热力图、网格、聚合等方式展示，致力于让大数据可视化变得简单易用。

它具有以下特性：

高性能
多线程
多图层叠加
友好的 AP
可以自定义主题

inMap 采用更加智能的地理可视化框架，主要面向从事数据可视化应用相关的工程师和设计师。

底层绘图引擎：目前基于 canvas 2d 提供基础绘图能力，基于 WebGL 的版本正在规划中；

算法：内置了经纬度墨卡托转换、文字避让算法、最佳标记点算法、自动分组标记配色算法等。

inMap 的每个算法都是为了增强用户体验，追求极致效果，打造伟大的产品。

inMap 的接口设计非常友好，希望让开发者通过简单的配置，就能快速构建出优美的可视化效果。

官网：http://inmap.talkingdata.com

GitHub：https://github.com/TalkingData/inmap

iView

iView 是TalkingData可视化团队开源的一套基于 Vue.js 的 UI 组件库，主要服务于 PC 界面的中后台产品。

它具有以下特性：

高质量、功能丰富
友好的 API ，自由灵活地使用空间，面向任何技术水平的开发者
细致、漂亮的 UI
事无巨细的文档
可自定义主题

同时 iView 也是一整套的前端解决方案，包括了设计规范、多语言（目前 iView 支持 15 国语言）、自定义主题、服务端渲染。

iView 支持 Vue.js 2.x、Vue.js 1.x、服务端渲染、Nuxt.js、Electron等。

iView 目前在 GitHub 上有 13,000 多 star，从 star 数量、口碑和功能性、UI / UE上，iView 都排在全球同类产品的 Top3。

官网：https://www.iviewui.com

GitHub：https://github.com/iView/iView

iView 新版本发布

在过去的两个多月里，iView 陆续发布了 2.9.0 和 2.10.0 两个重要版本。这两个版本总共有 255 个 commit，超过 40 项更新。来看一下，iView 具体有哪些更新：

一、日期组件 DatePicker 的重构

首先是在 2.10.0 对日期组件 DatePicker 的重构。DatePicker 是 iView 48 个组件里最复杂的组件之一。复杂的功能使得代码逻辑非常重，在许多新特性的支持上，比如兼容不同国家的日历规范等都很难在此基础上迭代，不得不推倒重来。

SergioCrisostomo 之前有开发过日期相关的 JS 库（https://github.com/SergioCrisostomo/js-calendar），所以对日期相关的功能点和 API 非常熟，iView 也是基于此库进行的重构。

新的日期组件主要增加了以下功能：

1. 范围选择支持从右往左选择。

之前在范围选择时，必须先选起点，再选终点，也就是从左往右选，但很多用户的习惯却刚好相反。该版本则同时支持两个方向的选择。

2. 新增 split-panels 属性，开启后，左右两面板可以不联动。

之前在范围选择时，左右两个面板是联动的，也就是右边永远比左边大一个月，任何一个面板切换月份或年份，另一个面板都会自动切换。该版本则可以设置为不联动，这样方便定位起始月份和结束月份。如图所示：

3. 新增 multiple 属性，开启后，可以选择多个日期。

虽然之前版本可以用其它 iView 组件组合出来一个多选的日期，但效果和交互多少会打折扣，该版本只要增加属性 multiple，就可以在一个日期面板上同时选择和呈现多个日期了。如图所示：

4. 新增属性 show-week-numbers，开启后，可以显示星期数。

增加这个属性，就可以在日历面板上显示当前是一年的第几周。如图所示：

还有其它很多项的更新，比如新增 start-date 属性，可以设置面板展开时默认显示的日期。新增属性 time-picker-options，可以在 type 为 datetime 和 datetimerange 下，配置 TimePicker 的属性，比如时间间隔 steps。完整的更新可以产看更新日志，这里不一一列举了。

二、键盘可访问性的支持

键盘的可访问性，主要是通过键盘的方向键、tab键、空格键等完成表单组件的切换和交互。在填写一个表单时（iView Form 组件），尤其有用，你可以离开鼠标，就完成一个复杂表单的填写与提交。

目前 iView 最新版本支持键盘可访问性的组件有：

Button、Input、Radio、Checkbox、Switch、AutoComplete、Slider、InputNumber。更多组件还在陆续支持中。

事实上，原生的表单控件，浏览器都是支持键盘的可访问性的，比如

手机端页面自适应解决方案—rem布局进阶版（附源码示例）

admin — Tue, 18 Apr 2017 07:14:21 +0000

一年前笔者写了一篇《手机端页面自适应解决方案—rem布局》，意外受到很多朋友的关注和喜欢。但随着时间的推移，该方案已然过时，故为大家介绍一个目前我极力推荐使用的，更加完美的方案——rem布局（进阶版）

该方案使用相当简单，把这段原生JS 放到 HTML 的 head 标签中即可（注:不要手动设置viewport，该方案自动帮你设置）

代码原理

这是阿里团队的高清方案布局代码，所谓高清方案就是根据设备屏幕的DPR（设备像素比，又称DPPX，比如dpr=2时，表示1个CSS像素由4个物理像素点组成）动态设置 html 的font-size, 同时根据设备DPR调整页面的缩放值，进而达到高清效果。

有何优势

引用简单，布局简便
根据设备屏幕的DPR,自动设置最合适的高清缩放。
保证了不同设备下视觉体验的一致性。（老方案是，屏幕越大元素越大；此方案是，屏幕越大，看的越多）
有效解决移动端真实1px问题（这里的1px 是设备屏幕上的物理像素）

如何使用

重要的事情说三遍！
绝不是每个地方都要用rem，rem只适用于固定尺寸！
绝不是每个地方都要用rem，rem只适用于固定尺寸！
绝不是每个地方都要用rem，rem只适用于固定尺寸！
在相当数量的布局情境中（比如底部导航元素平分屏幕宽，大尺寸元素），你必须使用百分比或者flex才能完美布局！
看过《手机端页面自适应解决方案—rem布局》的朋友，应该对rem有所了解，这里不再赘述，
此方案也是默认 1rem = 100px，所以你布局的时候，完全可以按照设计师给你的效果图写各种尺寸啦。
比如你在效果图上量取的某个按钮元素长 55px, 宽37px ，那你直接可以这样写样式：

.myBtn {
   width: 0.55rem;
   height: 0.37rem;
}

rem布局（进阶版）实践应用

iPhone5 下页面效果.png

iPhone 6 Plus 下页面效果.png

为了让朋友们更清晰感受此方案的巨大优势，下面是源码和Demo

实践应用源码（请在手机端或者手机模式下浏览效果更佳！）

示例源码

在线Demo

常见问题说明（2017/1/19）

许多同学对该方案存在不少误解导致使用出现各种问题，这里统一回复下。

1.问：为啥手机网页效果图宽度是要640或者750的，我非得弄个666的不行咩？

答：老实说当然可以，不过为了规范，640或者750是相对合适的。
拿Iphone 5s 举例，它的css像素宽度是320px，由于它的dpr=2，所以它的物理像素宽度为320 × 2 = 640px，这也就是为什么，你在5s上截了一张图，在电脑上打开，它的原始宽度是640px的原因。
那 iphone 6 的截图宽度呢？ 375 × 2 = 750
那 iphone 6 sp 的截图宽度呢？ 414 × 3 = 1242
以此类推，你现在能明白效果图为什么一般是 640 ，750 甚至是 1242 的原因了么？（真没有歧视安卓机的意思。。。）

2.问：宽度用rem写的情况下，在 iphone6 上没问题，在 iphone5上会有横向滚动条，何解？

答：假设你的效果图宽度是750，在这个效果图上可能有一个宽度为7rem（高清方案默认 1rem = 100px）的元素。我们知道，高清方案的特点就是几乎完美还原效果图，也就是说，你写了一个宽度为 7rem 的元素，那么在目前主流移动设备上都是7rem。然而，iphone 5 的宽度为640，也就是6.4rem。于是横向滚动条不可避免的出现了。
怎么办呢？这是我目前推荐的比较安全的方式：如果元素的宽度超过效果图宽度的一半（效果图宽为640或750），果断使用百分比宽度，或者flex布局。就像把等屏宽的图片宽度设为100%一样。

3.问：不是 1rem = 100px吗，为什么我的代码写了一个宽度为3rem的元素，在电脑端的谷歌浏览器上宽度只有150px?

答：先说高清方案代码，再次强调咱们的高清方案代码是根据设备的dpr动态设置html 的 font-size，
如果dpr=1(如电脑端），则html的font-size为50px，此时 1rem = 50px
如果dpr=2(如iphone 5 和 6），则html的font-size为100px，此时 1rem = 100px
如果dpr=3(如iphone 6 sp），则html的font-size为150px，此时 1rem = 150px
如果dpr为其他值，即便不是整数，如3.4 , 也是一样直接将dpr 乘以 50 。

再来说说效果图，一般来讲，我们的效果图宽度要么是640，要么是750，无论哪一个，它们对应设备的dpr=2，此时，1 rem = 50 × 2 = 100px。这也就是为什么高清方案默认1rem = 100px。而将1rem默认100px也是好处多多，可以帮你快速换算单位，比如在750宽度下的效果图，某元素宽度为53px，那么css宽度直接设为53/100=0.53rem了。

然而极少情况下，有设计师将效果图宽定为1242px，因为他手里只有一个iphone 6 sp (dpr = 3)，设计完效果图刚好可以在他的iphone 6 sp里查看调整。一切完毕之后，他将这个效果图交给你来切图。由于这个效果图对应设备的dpr=3，也就是1rem = 50 × 3 = 150px。所以如果你量取了一个宽度为90px的元素，它的css宽度应该为 90/150=0.6rem。由于咱们的高清方案默认1rem=100px，为了还原效果图，你需要这样换算。当然，一个技巧就是你可以直接修改咱们的高清方案的默认设置。在代码的最后你会看到 flex(100, 1) ，将其修改成flex(66.66667, 1)（感谢简友：V旅行指出此处错误！ 2017/3/24）就不用那么麻烦的换算了，此时那个90px的直接写成0.9rem就可以了。

4.问：高清方案在微信上，有时候字体会不受控制变的很大，怎么办？

答：点我，这是我对该问题的总结

5.问：我在底部导航用的flex感觉更合适一些，请问这样子混着用可以吗？

答：咱们的rem适合写固定尺寸。其余的根据需要换成flex或者百分比。源码示例中就有这三种的综合运用。

6.问：在高清方案下，一个标准的，较为理想的宽度为640的页面效果图应该是怎样的？

点击浏览：一个标准的640手机页面设计稿参考（没错，在此方案中，你可以完全按照这张设计稿的尺寸写布局了。就是这么简单！）

7.问：我在使用 rem 布局进阶方案的时候遇到了XXX的问题，如何解决？

此方案久经考验，具有普遍适用性，自身出致命问题的情况很少，至少笔者是没遇到过。
绝大多数你遇到的问题，都是由于对rem布局理解不到位导致的。本文对rem布局做了大量的解释说明，配置了若干 demo，你可以把你遇到的问题放到demo里测试。遇到问题时，首先问自己，为什么这明显的错误大家没遇到就我遇到了？？
如果你真的经过充分验证，比对，确实是rem布局自身出了问题，那么请私信我，把还原问题场景的 demo 或者文件发给我。谢谢！
http://www.jianshu.com/p/985d26b40199

HTML5+CSS3的响应式网页设计：自动适应屏幕宽度

admin — Tue, 18 Apr 2017 07:01:44 +0000

这几天都在修改博客上面的样式。本来用的是d83.0的模板。自己又修改了许多地方，其中自己修改的一些地方在手机里面显示的效果不是很理想，于是想改成自适应的效果。对CSS3不是特别的熟练，只能去网上找找案例看了。发现一个不错的文章。写的比较入门，也很仔细。所以拿过来分享给大家。如果还想看图片的响应式案例可以看我找的另外的一篇《分享一个非常有用的HTML5+CSS3响应式图片案例》。

移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？

手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。

很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。

于是，很早就有人设想，能不能”一次设计，普遍适用”，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？

一、”自适应网页设计”的概念

2010年，Ethan Marcotte提出了“自适应网页设计”（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。

他制作了一个范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。

如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。

如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。

如果屏幕宽度在400像素以下，则6张图片分成三行。

mediaqueri.es上面有更多这样的例子。

这里还有一个测试小工具，可以在一张网页上，同时显示不同分辨率屏幕的测试效果，我推荐安装。

二、允许网页宽度自动调整

“自适应网页设计”到底是怎么做到的？其实并不难。

首先，在网页代码的头部，加入一行viewport元标签。

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。

三、不使用绝对宽度

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。

具体说，CSS代码不能指定像素宽度：width:xxx px;只能指定百分比宽度：width: xx%;或者width:auto;

四、相对大小的字体

字体也不能使用绝对大小（px），而只能使用相对大小（em）。body {font: normal 100% Helvetica, Arial, sans-serif;}

上面的代码指定，字体大小是页面默认大小的100%，即16像素。h1 {font-size: 1.5em;}

然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。small {font-size: 0.875em;}

small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。

五、流动布局（fluid grid）

“流动布局”的含义是，各个区块的位置都是浮动的，不是固定不变的。

.main {float: right;width: 70%;}
.leftBar {float: left;width: 25%;}

float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

另外，绝对定位（position: absolute）的使用，也要非常小心。

六、选择加载CSS

“自适应网页设计”的核心，就是CSS3引入的Media Query模块。

它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。

上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。

如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。

除了用html标签加载CSS文件，还可以在现有CSS文件中加载。

@import url("tinyScreen.css") screen and (max-device-width: 400px);

七、CSS的@media规则

同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。

@media screen and (max-device-width: 400px) {
 
.column {
float: none;
width:auto;
}
 
#sidebar {
display:none;
}
}

上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。

八、图片的自适应（fluid image）

除了布局和文本，”自适应网页设计”还必须实现图片的自动缩放。

这只要一行CSS代码：img { max-width: 100%;}

这行代码对于大多数嵌入网页的视频也有效，所以可以写成：img, object { max-width: 100%;}

老版本的IE不支持max-width，所以只好写成：img { width: 100%; }

此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：img { -ms-interpolation-mode: bicubic; }

或者，Ethan Marcotte的imgSizer.js。

addLoadEvent(function() {
 
var imgs = document.getElementById("content").getElementsByTagName("img");
 
imgSizer.collate(imgs);
 
});

不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有很多方法可以做到这一条，服务器端和客户端都可以实现。

我觉得从上面的的一些分析可以学到很多东西，能解决一些CSS3响应式网页设计基本的入门问题，希望也能帮到看到的朋友。

http://yusi123.com/2539.html

html input type=”file” 美化

admin — Tue, 11 Apr 2017 06:49:15 +0000

原生的file input不收待见的另外一个原因是：长的丑还不好控制。

举个例子，下图这个“选择文件”这几个文字，我们就不好对file控件动刀子实现自定义：

怎么办呢？

有一种方法是这样的：
让file类型的元素透明度0，覆盖在我们好看的按钮上。然后我们去点击好看的按钮，实际上点击是是file元素。

然而，此方法有一些不足：

尺寸控制不灵活。CSS width属性有些浏览器不管用，需要使用size，然后高度控制也不精准，我们很难正好覆盖在好看的自定义按钮上。
样式不好控制，按钮的hover态以及active态不好处理。
HTML结构限制以及定位成本。

更好的方法是，使用label元素与file控件关联，好处在于：

点击自定义的漂亮按钮就是点击我们file控件；
没有尺寸控制不精确的问题；
没有不能响应hover态active态的问题；
我们的漂亮按钮甚至可以在form表单元素的外面，例如：
```
上传文件
```
上传文件