SegmentFault 前端后花园最新的文章
2018-01-12T16:36:30+08:00
https://segmentfault.com/feeds/blogs
https://creativecommons.org/licenses/by-nc-nd/4.0/
网页渲染的颜色竟然和设定值的不同!Chrome 61+色差解决办法
https://segmentfault.com/a/1190000012818983
2018-01-12T16:36:30+08:00
2018-01-12T16:36:30+08:00
xank
https://segmentfault.com/u/xank
1
<p>最近在和设计对UI的时候发现色彩总是对不上。。。</p>
<p>打开屏幕截图工具识色,竟然发现浏览器渲染的颜色和设定值不一样!</p>
<p>这差点让我开始怀疑人生了。。竟然还有这样的Bug</p>
<p><img src="/img/bV1WTN?w=1080&h=1440" alt="%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20180112162130.jpg" title="%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20180112162130.jpg"></p>
<p>上图可以看到,实际设定rgb(227,109,1),缺渲染出rgb(211,115,47),便暗一些。。</p>
<h3>百度搜索无果~~开始翻墙Google</h3>
<p>很快找到<br><a href="https://link.segmentfault.com/?enc=8fhDgmSjWway7yipX5GvOg%3D%3D.vmKWOiunvC7SmEOZhn0HN1%2FN2dJCVV18o%2FP8g5NHUw7NewVXweUiGWvYsEIGnOxeUTSZFdAO5uxv9vVw%2BV5%2FXMr2NQWTr1%2BLUDYK3K%2BbXxw%3D" rel="nofollow">https://productforums.google....</a></p>
<p><img src="/img/bV1WUD?w=947&h=362" alt="%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20180112161445.jpg" title="%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20180112161445.jpg"></p>
<p>解释大致是Chrome61开始会遵循显示器上的配置文件。</p>
<p>发现我的连的是双屏显示器(一台Surface Stuido外连Dell的屏幕)可能其中一台的颜色配置文件不相同导致的问题。</p>
<p>打开显示器色彩配置:</p>
<p><img src="/img/bV1WXo?w=1364&h=1349" alt="图片描述" title="图片描述"></p>
<p>好吧~ 另一台显示器无法修改色彩配置,看来只能从浏览器来解决这个问题了。</p>
<h3>解决办法(2选1)</h3>
<p>方法一:关闭硬件加速,重启后浏览器就恢复正常<br><img src="/img/bV1WVM?w=1384&h=386" alt="图片描述" title="图片描述"></p>
<p>方法二:打开chrome://flags/#force-color-profile,将色彩配置设置为sRGB<br><img src="/img/bV1WWd?w=1526&h=515" alt="图片描述" title="图片描述"></p>
DataV实践:创建迪士尼乐园实况大屏
https://segmentfault.com/a/1190000012585258
2017-12-26T11:34:04+08:00
2017-12-26T11:34:04+08:00
xank
https://segmentfault.com/u/xank
1
<p><img src="/img/remote/1460000012585263?w=1800&h=1200" alt="" title=""><br>我是一个迪士尼乐园的爱好者,我想拥有一块大屏能实时显示迪士尼乐园的情况,以便我觉得今天去不去乐园,去乐园玩什么项目。。。</p>
<h2>数据来源</h2>
<p>我写了一个抓包的程序,每天获取一次乐园运营数据(项目开放时间,状态灯),每5分钟获取一次乐园实况数据(排队时间、客流量等)</p>
<p><img src="/img/remote/1460000012585264?w=1744&h=1005" alt="" title=""></p>
<blockquote>现在用的还是Mysql存储,计划转Redius,运行了快一年了,数据量太大性能越来越差~</blockquote>
<h2>关于DataV</h2>
<p><img src="/img/remote/1460000012585265?w=2000&h=953" alt="" title=""><br>DataV 是阿里云出品的一款数据可视化应用,可以通过图形可视化的界面快速搭建专业旨让更多的人看到数据可视化的魅力。</p>
<p><img src="/img/remote/1460000012585266?w=630&h=391" alt="" title=""><br>一般应用在交易大厅,展览中心,管控中心,老板办公室等等场景,把一些关键数据集中展示在一块巨大的LED屏幕上,<strong>其实就是巨大化的Dashboard</strong>,是当今数一数二的装逼方式!</p>
<h2>开始制作</h2>
<p>进入[<a href="https://link.segmentfault.com/?enc=4CKyltimkTgDzPhzthnuAQ%3D%3D.ldV1mex6xKzLp0dZS1NeUlOheb647cW8%2FY87oeYMEv4%3D" rel="nofollow">https://datav.aliyun.com</a>]()官网。<br>我购买的是基础版,51一年,不是很贵,功能对当前需求够用。<br><img src="/img/remote/1460000012585267?w=1380&h=2120" alt="" title=""></p>
<h3>布局规划</h3>
<p><img src="/img/remote/1460000012585268?w=1280&h=800" alt="" title=""><br>可以先借助草图工具规划一下:</p>
<ol>
<li>顶部设计:因为是实时大屏,时间必不可少,顶部为时间 - 标题 - Logo 的布局</li>
<li>左侧设计:乐园客流量趋势,乐园主题园区热度,显示乐园和各个主题园区的热门情况</li>
<li>中间设计:上部分为轮播所有项目的等待时间+演出项目的时间表,下部分用柱状图显示核心项目的排队时间</li>
<li>右侧设计:乐园平均等待时间 + 热门项目等待时间 + 乐园指数,显示乐园整体和热门项目的情况</li>
</ol>
<h3>选择模板</h3>
<p><img src="/img/remote/1460000012585269?w=2604&h=1754" alt="" title=""><br>DataV提供了多套模板针对不同的场景,这里第一个就非常适合这一套项目</p>
<p>选择<strong>创建大屏</strong>进入编辑界面</p>
<h3>顶部制作</h3>
<p><img src="/img/remote/1460000012585270?w=659&h=1097" alt="" title=""></p>
<p><img src="/img/remote/1460000012585271?w=1735&h=121" alt="" title=""><br>选择辅助图形 - 添加时间器,再给标题加个边框,再加个Logo,2分钟完成!</p>
<h3>左侧制作</h3>
<p><img src="/img/remote/1460000012585272?w=500&h=337" alt="" title=""></p>
<p><strong>实施客流量:</strong></p>
<p>选择一个线框图或者新建一个</p>
<p><img src="/img/remote/1460000012585273?w=780&h=910" alt="" title=""></p>
<p>然后进入图表设置,选择<strong>数据</strong>这里我们使用Api,</p>
<blockquote>这里的Api必须返回的必须是直接数据,如{data:{},result:1} 这样就不行</blockquote>
<p>下面这是我们从服务器读到的数据</p>
<pre><code class="json">[
{
"num": 10730,
"utime": "08:30"
},
{
"num": 10730,
"utime": "08:45"
}...
]</code></pre>
<p>然后我们进行字段映射,将x(x轴)匹配为utime,y(y轴)匹配为num(数值)这样图表就更新了!</p>
<p><img src="/img/remote/1460000012585274?w=560&h=65" alt="" title=""><br>我们还可以设置<strong>自动更新</strong>定时刷新图表</p>
<p>进入样式设置:可对图表进行个性化定制,这些基本上手就会我就不一一说明了,这里重点说下数据配置->数据增量这个设置,这个勾选后可将数据进行截取一部分,比如说我的api返回的是当前一天的数据流,我的图表只要最近<strong>3小时</strong>,则可以设置<strong>最大容量</strong>进行截取</p>
<p><strong>主题园区热度:</strong></p>
<p><img src="/img/remote/1460000012585275?w=498&h=473" alt="" title=""></p>
<p>这个图表反应各个园区的热度 ,展示的就是每个主题园区所有项目的排队时间总和</p>
<p>选择常规图表->柱状图->胶囊图</p>
<p><img src="/img/remote/1460000012585276?w=472&h=226" alt="" title=""><br>数据配置和上图一样,这里字段映射需要增加一个类目(就是每个项目包含的哪个主题园区)</p>
<p>进入样式设置:在数据系列中设置下每个项目的不同的颜色</p>
<p><img src="/img/remote/1460000012585277?w=477&h=732" alt="" title=""></p>
<h3>中间制作</h3>
<p><strong>等待时间/演出时间表</strong></p>
<p><img src="/img/remote/1460000012585278?w=798&h=537" alt="" title=""></p>
<p>选择文字->轮播列表新建</p>
<p><img src="/img/remote/1460000012585279?w=818&h=392" alt="" title=""></p>
<p>数据配置同上,但这里不需要进行字段映射<br><img src="/img/remote/1460000012585280?w=477&h=730" alt="" title=""></p>
<pre><code class="json">\\数据响应结果
[
{
"name": "翱翔•飞越地平线",
"id": "attSoaringOverHorizon",
"start_time": "8:00",
"end_time": "20:30",
"status": "Operating",
"type": 2,
"fpTime": 0,
"postedWaitMinutes": 180,
"fastPassStartTime": 0,
"fastPass": 1,
"is_host": 1,
"lng": "121.6717021420",
"lat": "31.1498546788",
"mapShow": false,
"disance": 0
},...
]</code></pre>
<p>进入样式设置,选择自定义列可配置需要展示的数据,这里只要添加两项,名称和排队时间</p>
<p><img src="/img/remote/1460000012585281?w=466&h=1083" alt="" title=""></p>
<blockquote>演出时间表的配置和项目等待时间一样</blockquote>
<p>然后在下面创建一个等待时间垂直柱状图,这样可以更直观的显示哪个项目人数最多,配置同上</p>
<p><img src="/img/remote/1460000012585282?w=805&h=319" alt="" title=""></p>
<h3>右侧制作</h3>
<p><img src="/img/remote/1460000012585283?w=404&h=821" alt="" title=""></p>
<p>右侧的制作和左侧一样,就不一一讲解了。</p>
<h3>完成效果</h3>
<p><img src="/img/remote/1460000012585284?w=2304&h=1293" alt="" title=""></p>
<p><img src="/img/remote/1460000012585285?w=1440&h=1080" alt="" title=""></p>
<p>附上我的小书房,这下抬头就可以看到乐园的实况,是不是很方便呢!</p>
<p><img src="/img/remote/1460000012585286?w=534&h=543" alt="" title=""><br>附上我的微信,欢迎喜欢迪士尼和前后端的一起交流!</p>
Javascript中JSON数据分组优化实践
https://segmentfault.com/a/1190000012525426
2017-12-21T14:38:12+08:00
2017-12-21T14:38:12+08:00
xank
https://segmentfault.com/u/xank
2
<p>现有一堆数据,我需要按时间进行分组,以便前端视图呈现</p>
<pre><code class="json">[
{"date":"2017-12-22","start_time":"10:00:00","end_time":"10:00:00","status":"Performance Time"},
{"date":"2017-12-22","start_time":"10:40:00","end_time":"10:40:00","status":"Performance Time"},
{"date":"2017-12-23","start_time":"10:00:00","end_time":"10:00:00","status":"Performance Time"},
{"date":"2017-12-23","start_time":"10:40:00","end_time":"10:40:00","status":"Performance Time"}
]</code></pre>
<p>需转化为如下</p>
<pre><code class="json">[
{
date: '2017-12-22',
data: [
{
date: '2017-12-22',
start_time: '10:00:00',
end_time: '10:00:00',
status: 'Performance Time'
},
{
date: '2017-12-22',
start_time: '10:40:00',
end_time: '10:40:00',
status: 'Performance Time'
}
]
},
{
date: '2017-12-23',
data: [
{
date: '2017-12-23',
start_time: '10:00:00',
end_time: '10:00:00',
status: 'Performance Time'
},
{
date: '2017-12-23',
start_time: '10:40:00',
end_time: '10:40:00',
status: 'Performance Time'
}
]
}
]
</code></pre>
<h2>1.原始方法,网络一大堆</h2>
<pre><code class="javascript"> var map = {},
nList = []
//遍历原始数组
for (var i = 0; i < arr.length; i++) {
var item = arr[i]
//如果map没有则在新nList中添加
if (!map[item.date]) {
nList.push({
date: item.date,
data: [item]
})
map[item.date] = item
} else {
//遍历nList
for (var j = 0; j < nList.length; j++) {
var nItem = nList[j]、
//如查找到date符合则添加
if (nItem.date == item.date) {
nItem.data.push(item)
//跳出循环
break
}
}
}
}</code></pre>
<p>运行效率:遍历1000个约3ms,总觉得不优雅,而且没用到ES5的特性,于是决定自己优化一下!</p>
<h2>2.使用ES5特性</h2>
<p>将for替换为forEach和every</p>
<pre><code class="javascript"> let map = {},
nList = []
arr.forEach((item) => {
if (!map[item.date]) {
nList.push({
date: item.date,
data: [item]
})
map[item.date] = item
} else {
//因为forEach不支持break,所以使用every实现
nList.every((nItem) => {
if (nItem.date === item.date) {
nItem.data.push(item)
return false
}
return true
})
}
})</code></pre>
<p>性能优化50%,约1.5ms!</p>
<h2>3.性能优化实践</h2>
<p>因为我的数组中的date是按<strong>顺序排列</strong>,而且没有重复,这样可以考虑<strong>去除第二个循环</strong></p>
<pre><code class="javascript"> let map = {},
nList = []
//设置初始key为0
let _nkey = 0
arr.forEach((item, index) => {
if (index === 0) {
nList.push({
date: item.date,
data: [item]
})
} else {
let oItem = arr[index - 1]
//和前一个date一致则在当前添加,否则添加至nList
if (item.date === oItem.date) {
nList[_nkey]['data'].push(item)
} else {
nList.push({
date: item.date,
data: [item]
})
_nkey ++
}
}
})</code></pre>
<p>效率再次优化50%,约1ms!</p>
<h2>项目最终效果:</h2>
<p><img src="/img/bV0IA0?w=2107&h=1354" alt="图片描述" title="图片描述"></p>