一、结构
倒序显示经历，第一行是时间与公司，第二行是行业，第三行是工作内容，这里也是用了flex布局，图表是用个canvas画布画出来的。下图是大屏幕下的显示方式：
移动端的显示如下：
<article class="user_experience"> <div class="left"> <h5>2014/5--2014/9：大肥羊学校</h5> <h6>所属行业：金融/投资/证券</h6> <div class="introduce">懒羊羊是喜羊羊与灰太狼里的正面人物，关于懒羊羊的介绍： 英文名：Lazy Sheep 小名：</div> </div> <div class="right"> <canvas id="piechart1"></canvas> </div> </article>
二、图表
图表我用了一个插件，叫chat.js，这是一个HTML5插件，不依赖任何库。
刚在调这个插件的时候碰到了个错误，如下图显示：
调到后面才发现原来是因为canvas画布的父级菜单有个样式是display:none导致的。
<canvas id="piechart1"></canvas>
后面就只能在显示页面的时候加个回调函数。
if(row != 3) return;这是为了防止点击另外三个选项卡的时候出现上面那个错误
if(pies.length <= index)的作用是在第二次点击项目选项卡的时候不用再初始化了，做了个简单的缓存
var pies = [];
var piedatas = set_pie_datas();
var pieids = ['piechart1', 'piechart2'];
$('#nav').delegate('a', 'click', function() { $(this).addClass('cur').siblings().removeClass('cur'); var row = $(this).index(); $('#menu').children().hide().eq(row).show().css('opacity', 0).animate({opacity:'1'}, 1000, 'linear', function() { if(row != 3) return; $.each(pieids, function(index, item) { if(pies.length <= index) { var pie = draw_pie(piedatas[index], item); pies.push(pie); } }); }); //画图表 function draw_pie(pieData, id) { var piechart = document.getElementById(id).getContext("2d"); return new Chart(piechart).Pie(pieData); } //配置图表信息 function set_pie_datas() { var piedatas = [ [ { value: 300, color:"#F7464A", highlight: "#FF5A5E", label: "HTML/CSS" }, { value: 50, color: "#46BFBD", highlight: "#5AD3D1", label: "HTML5/CSS3" }, { value: 100, color: "#FDB45C", highlight: "#FFC870", label: "JavaScript" }, { value: 40, color: "#949FB1", highlight: "#A8B3C5", label: "PHP" }, { value: 120, color: "#4D5360", highlight: "#616774", label: "MySQL" } ], [ { value: 100, color:"#F7464A", highlight: "#FF5A5E", label: "HTML/CSS" }, { value: 80, color: "#46BFBD", highlight: "#5AD3D1", label: "HTML5/CSS3" }, { value: 30, color: "#FDB45C", highlight: "#FFC870", label: "JavaScript" } ] ]; return piedatas; }
这里再推荐一个测试页面加载信息的网站，挺实用的
源码下载：
http://download.csdn.net/detail/loneleaf1/8849069
本文转自 咖啡机（K.F.J） 博客园博客，原文链接：http://www.cnblogs.com/strick/p/4593404.html
，如需转载请自行联系原作者
