月度归档： 2016年4月

Highcharts数据可视化图表库

1.简介

   Highcharts是一款纯javascript编写的图表库，能够很简单便捷的在Web网站或Web应用中添加交互性的图表，Highcharts目前支持多达18种不同类型的图表。
在线演示:http://www.hcharts.cn/demo/index.php
Api文档:http://www.hcharts.cn/api/index.php
中文教程:http://www.hcharts.cn/docs/index.php

2.highcharts优势

  • 兼容性
    Highcharts支持目前所有的现代浏览器，包括IE6 +、ios、Android。Highcharts在标准浏览器中使用SVG技术渲染图形，在遗留的IE浏览器中使用VML技术来绘图。
  • 开源免费
    针对个人用户及非商业用途免费，并提供源代码下载，可任意修改。商业用途需要购买许可。
  • 纯Javascript
    Highcharts完全基于本地浏览器技术，不需要任何插件（例如Flash、java），不需要安装任何服务器环境或动态语言库支持，只需要两个js文件即可运行。
  • 图表类型丰富
    Highcharts目前支持直线图、曲线图、面积图、曲线面积图、面积范围图、曲线面积范围图、柱状图、柱状范围图、条形图、饼图、散点图、箱线图、气泡图、误差线图、漏斗图、仪表图、瀑布图、雷达图，共18种类型图表，其中很多图表可以集成在同一个图形中形成综合图。
  • 动态性
    提供丰富的API接口，方便在创建图表后对图表的任意点、线和文字等进行增加、删除和修改操作。
  • 图表导出和打印功能
    可以将Highcharts图表导出为PNG、JPG、PDF和SVG格式文件或直接在网页上打印出来。
  • 图表缩放
    可以设置图表的缩放，让你更方便查看图表数据。
  • 支持外部数据加载
    Highcharts支持多种数据形式，可以是Javascript数组、json文件、json对象和表格数据等。

3.安装使用方法

（1）页面引入jquery文件和highcharts.js文件
<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
（2）创建放置图表的元素
<div id="container" style="min-width:800px;height:400px"></div>
（3）调用插件方法
$(function(){
   $('#container').highcharts({
       //配置参数
   });
});

4.基本组成

   通常情况下，Highcharts包含标题（Title）、坐标轴（Axis）、数据列（Series）、数据提示框（Tooltip）、图例（Legend）、版权信息（Credits）等，高级的还包括导出功能按钮（Exporting）、标示线（PlotLines）、标示区域（PlotBands）等。
Highcharts基本组成部分如下图所示:
图片1
Title
图表标题，包含标题和副标题（subTitle），其中副标题是非必须的。
Axis
坐标轴，包含x轴（xAxis）和y轴（yAxis）。通常情况下，x轴显示在图表的底部，y轴显示在图表的左侧。多个数据列可以共同使用同一个坐标轴，为了对比或区分数据，Highcharts提供了多轴的支持。
Series
数据列。图表上一个或多个数据系列，比如曲线图中的一条曲线，柱状图中的一个柱形。
Tooltip
数据提示框。当鼠标悬停在某点上时，以框的形式提示该点的数据，比如该点的值，数据单位等。数据提示框内提示的信息完全可以通过格式化函数动态指定。
Legend
图例。用不同形状、颜色、文字等 标示不同数据列，通过点击标示可以显示或隐藏该数据列。
Credits
图表版权信息。显示在图表右下方的包含链接的文字，默认是Highcharts官网地址。通过指定credits.enabled=false即可不显示该信息。
Exporting
导出功能按钮。通过引入exporting.js即可增加图表导出为常见文件功能。
PlotLines
标示线。可以在图表上增加一条标示线，比如平均值线等。
PlotBands
标示区域。可以在图表添加不同颜色的区域带，标示出明显的范围区域。

5.折线图实现代码

89

6.图表效果展示

（1）折线图
1
（2）柱状图
4
（3）饼图
5
（4）3D柱状图
3

ECharts数据可视化图表库

一、使用体验
ECharts所提供的常规的图表样式简洁大方，默认的颜色配置不错，也可以自定义，丰富的配置项设置可交互，可个性化定制。

官网提供了很详细的入手文档，主要是配置项的熟悉使用。
官网：http://echarts.baidu.com
echarts-pic1

二、引用方式
1、最简单的引用方式是使用 script 标签引入，官网还提供了“在线构建”的选项，可以按需生成简化版js文件。
<script src="echarts.min.js">
echarts-pic4

2、HTML只需要一个具备高宽的dom容器。
<div id="container" style="width:600px;height:400px;"></div>

3、通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成图表，option指定图表的配置项和数据即可。
var mychart = echarts.init(document.getElementById('container'));
mychart.setOption(option);
echarts-pic2

三、配置项设置
ECharts提供了“配置项手册”，树状图的形式展现内部属性方法，并搭配示例说明。方面查询、理解和使用，入手起来很快。
配置项设置相对于搭建图表框架，设置完之后可以延续使用，每次只需调取不同数据进行展示。
echarts-pic3

四、细节功能
1、保存为图片，并可以设置保存的像素比；当前图表所用数据列表形式展现；
tool1
tool3
2、图表形式的切换，如折线图和柱状图因为数据形式相同可以切换展示；
tool2
3、多图表之间的切换、联动；
4、数据的动态更新，数据的改变驱动图表展现的改变；
5、数据区域缩放、拖动等交互组件；
6、地理坐标系展示，提供了世界、中国、各省地图的js和json引入方式；
echarts-pic6
7、各类主题样式的选择下载；
echarts-pic5
8、异步数据的加载和更新。
echarts-pic7

异步数据加载示例
http://shopdev.ci123.com/svn/jinzhe/webroot/echarts/echarts_ajax.php

ReactiveCocoa实现验证码倒计时

有时候需要时间验证码倒计时，以前在没有使用rac的时候我是这么写的：

 __block int timeout = [time intValue];
dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);
dispatch_source_t _timer = dispatch_source_create(DISPATCH_SOURCE_TYPE_TIMER, 0, 0,queue);
dispatch_source_set_timer(_timer,dispatch_walltime(NULL, 0),1.0*NSEC_PER_SEC, 0);
dispatch_source_set_event_handler(_timer, ^{
    if(timeout<=0){
        dispatch_source_cancel(_timer);
        dispatch_async(dispatch_get_main_queue(), ^{
            // 倒计时完成
            [self.codeButton setTitle:@"获取验证码" forState:UIControlStateNormal];
            self.codeButton.enabled = YES;
        });
    }else{
        int seconds = timeout;
        NSString *strTime = [NSString stringWithFormat:@"%.2d", seconds];
        dispatch_async(dispatch_get_main_queue(), ^{
           // 更新button上的倒计时
             [self.codeButton setTitle:[NSString stringWithFormat:@"%@秒后重新获取",strTime] forState:UIControlStateNormal];
           self.codeButton.enabled = NO;
        });
        timeout--;
    }
});
dispatch_resume(_timer);

用GCD这么写比较蛋疼，更好的办法，肯定有的，但是因为项目的原因没有再研究，直到用到了ReactiveCocoa后，我不由得思考，如何更简单的实现这个功能：

  • 将倒计时本身给抽取出来；

  • 将按钮的enabled给独立出来；

    @weakify(self);
static NSInteger number = 0;
RACSignal *timerSignal = [[[RACSignal interval:1.0f onScheduler:[RACScheduler mainThreadScheduler]] map:^id(NSDate *date){
    @strongify(self);
    if (--number <= 0) {
        [self.codeButton setTitle:@"获取验证码" forState:UIControlStateNormal];
        return @YES;
    }else{
        [self.codeButton setTitle:[NSString stringWithFormat:@"%d秒后可重新获取", (int)number] forState:UIControlStateNormal];
        return @NO;
    }
}] takeUntilBlock:^BOOL(id x){
    return number <= 0;
}];

// 验证码点击
self.regView.codeButton.rac_command = [[RACCommand alloc]initWithSignalBlock:^RACSignal *(id input) {
    number = kCountDownSeconds;
    return timerSignal;
}];

好处一目了然。

iOS博客问答摘录

最近在阅读大神Casa Taloyum的博客,发现他不仅文章写得好，还尽心尽力的回复每一个人的评论，每篇文章评价都上百条，一条条看下来，受益匪浅，不仅有初学者的问题，也有开发遇到瓶颈的探讨，作者都一一解答，我就摘抄了一部分，让大家分享。

1、什么时候添加和删除notification?

答：

  • 根据最小权力原则，我们倾向于优先放在展示周期去监听事件。
    ViewController的展示周期是小于ViewController的生命周期的，所以一般如果能在展示周期完成的监听事件的需求，就不会放到生命周期中去做。除非展示周期搞不定的，才会把监听扩大到生命周期。

2、如果一个ViewController 有很多的业务，视图也比较复杂，该怎么拆分呢？我想把业务的处理和页面跳转抽取出来，放到一个category里面，这样viewController可以减少很多代码，但是这个category貌似没有复用的价值。
另外，如果UITableView里面有很多不一样的cell，如何重构代码才能使cell的逻辑简化呢？我尝试用工厂模式去解决，但是发现每个cell需要的model参数都差不多，无法通过model去区分，而通过indexPath去区分的话又不方便重用，只能是一个页面适用。

答：

  • 一般是按照业务角色来拆分业务模块，这需要你对业务有很好的抽象能力。首先，用Category来做对象功能拆分这个思路是没错的，但是对于拆分ViewController来说，拆分更加偏重的是对业务的抽象，然后设立角色，这样才能做到可复用，所以category的思路在这种场景下是不适用的。category只是把大对象变多个小对象而已，它适合拆分那种本身就已经抽象程度比较高、可复用性比较高的底层对象，而不适合用来拆分业务。

  • 独立出DataSource成一个对象，DataSource事实上就可以理解为一个factory，然后DataSource根据Controller给的指示（通过设置DataSource属性也好，通过方法穿参数也行）去生产当前需要的Cell
    继续阅读iOS博客问答摘录