其实就是个简单的img-src需求，显示指定url地址的图片，刚开始用的cc.loader.load，后来换成cc.assetManager.loadAny，都不好用，最后换成cc.assetManager.loadRemote，问题解决
1 2 3 4 | let imgUrl = 'xxx';//图片地址 cc.assetManager.loadRemote(imgUrl, {ext: '.png'}, (err, tex: cc.Texture2D) => { this.imgNode.getComponent(cc.Sprite).spriteFrame = new cc.SpriteFrame(tex); }); |
——-
转载请注明出处：http://www.jiangkl.com/2022/01/cocos_net_img
首先明确一点，这里说的桑基图，是参照百度echarts的样式的这种桑基图。这种图，既可以标示数量多寡，又可以标示相关之间的关联关系，比单纯的饼图和折线图可以承载更多的信息
刚开始准备用python来绘制，但搜了很多资料都有些不着边际，好不容易找一个看起来靠谱的里做了一版，绘制出来了，样式却和百度这个差别很大
于是继续找资料，找到了一个能实现需求的包，装上以后，运行。。。生成的居然是一段html，然后打开看，实际还是调的echarts。。。
既然逃不过echarts索性改改思路吧：python处理数据，生成数据json串，保存到服务器
然后用php做一个承接页，读取这个json串
将承接页的链接加到统计邮件里，点链接打开统计图，还带了交互功能，体验更好，嘿嘿
示例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | //nodes: 所有会出现的节点 //links: 所有的关系线，source是左边节点，target是右边节点 var dataJson = { "nodes":[{"name": '玉米'}, {"name": '大豆'}, {"name": '蛋白质'}, {"name": '淀粉'}, {"name": '脂肪'}, {"name": '水'}, {"name": '能量'}], "links": [ {"source": '玉米', "target": '蛋白质', "value": 10}, {"source": '玉米', "target": '淀粉', "value": 78}, {"source": '玉米', "target": '水', "value": 2}, {"source": '玉米', "target": '脂肪', "value": 10}, {"source": '大豆', "target": '蛋白质', "value": 30}, {"source": '大豆', "target": '淀粉', "value": 10}, {"source": '大豆', "target": '脂肪', "value": 57}, {"source": '大豆', "target": '水', "value": 3}, {"source": '蛋白质', "target": '能量', "value": 40}, {"source": '蛋白质', "target": '水', "value": 60}, {"source": '淀粉', "target": '能量', "value": 60}, {"source": '淀粉', "target": '水', "value": 40}, {"source": '脂肪', "target": '能量', "value": 50}, {"source": '脂肪', "target": '水', "value": 50} ] } echarts.init(document.getElementById("myChart")).setOption( (option = { title: { text: 'xxxx' }, tooltip: { trigger: 'item', triggerOn: 'mousemove' }, series: [ { type: 'sankey', data: dataJson.nodes, links: dataJson.links, emphasis: { focus: 'adjacency' }, lineStyle: { color: 'gradient', curveness: 0.5 } } ] }) ); |
交互体验可以直接去echart官网试试：https://echarts.apache.org/examples/zh/editor.html?c=sankey-simple
———-
转载请注明出处：http://www.jiangkl.com/2022/01/sankey
这几年，前端技术日新月异，浏览器/h5获得的权限越来越多。这里使用h5页面做一个相册的上传功能，读取手机相册、上传到服务器，要求能够一次选择多张、上传前能看到预览、并能显示各个照片的上传进度。看到这里，有朋友肯定说：这有何难，input-file标签早就已经有multiple属性，加了它就能选多图了。呵呵，看起来简单，实际做起来问题还挺多。这里按顺序列一几个卡主的地方和解决方法：
1. 多图上传
看到这里，肯定有人说了，不是有multiple属性吗？
确实有，可实际用起来，不一样的
iphone好办，全都支持一次选择多张图片
Android手机有点麻烦，部分手机、部分浏览器不支持一次选多图；而且即便支持选多图，交互方式也不一样。比如我手头这台华为/荣耀，微信内置浏览器只能一次选一张图，改用系统浏览器，虽然可以选多张，但是需要长按，对于不熟悉的用户，可能发现不了这个功能，这就需要在应用里加指引；旁边同事的锤子就还好，微信内置浏览器就能选多图，和iphone的体验类似
2. 上传前的预览
这个功能说白了，就是怎么拿到本机图片文件、放到img标签的src里。前端浏览器的权限限制一直很严格，对于图片上传当然也是如此，肯定不会把文件路径给你。试了几个方案，最终用的是FileReader读取、转base64显示。第一次用前端的FileReader功能，还算好用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var imgB64Arr = []; //fileInput是input标签 fileInput.change=function(){ var files = this.files; for(var j = 0; j < files.length; j++){ var reader = new FileReader(); reader.readAsDataURL(files[j]); reader.onload = function(){ var v64 = this.result; imgB64Arr.push(b64); //...预览显示逻辑... }; } }; |
这个方案将图片的base64编码放在了imgB64Arr数组里，以方便后续上传处理。不过考虑到现代手机拍照的大小，和多选功能，如果一次选的图很多，会占用大量的内存，所以这里流畅度待验证，可能需要优化
3. 逐个上传
分开上传的目的有二：
1). 递归上传，降低有网络问题带来的上传失败的概率
2). 分开显示上传进度，这样前端体验会更好
这里我偷了个懒，没用递归，而是定时轮训imgB64Arr数组，有内容就上传，上传完删掉，呵呵
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | var uploadingImg = false; //标示当前是否有正在上传的东西 setInterval(function(){ if(!uploadingImg && imgB64Arr.length > 0){ var nowUp = imgB64Arr[0]; uploadingImg = true; var imgName = 'xxx';//文件命名策略 subimtInageFile(imgName, imgBa64s[nowUp.img], function(retu, err){ if(err){ //TODO: 错误处理 return; } //上传完成相关数据维护 imgB64Arr = imgB64Arr.length > 0 ? imgB64Arr.slice(1) : []; uploadingImg = false; //TODO: 显示更新逻辑 }); } }, 300); function subimtInageFile(imgName, ba64, callback){ var formData = new FormData(); formData.append('up_photo', convertBase64UrlToBlon(ba64)); //这里服务端要留意：没找到怎么把名字写到上传文件里，所以将文件名直接作为单独一个post参数提交 formData.append('file_name', imgName); $.ajax({ url: '...', type: 'POST', data: formData, dataType: 'json', processData: false, //否则jquery会报错 contentType: false, success: function(sd){ callback && callback(sd); }, error: function(xhr, err){ callback && callback(false, err); } }); } //图片处理，base64欢迎成图片blob function convertBase64UrlToBlon(base64Str){ var bs = window.atob(base64Str.split(',')[1]); var ab = new ArrayBuffer(bs.length); var ia = new Uint8Array(ab); for(var i = 0; i < bs.length; i++) ia[i] = bs.charCodeAt(i); var bb = new Blob([ab], {type: 'image/png'}); return bb; } |
———-
写到这里，大概有朋友要说了：这么麻烦干嘛，微信有wx.chooseImage()不香吗？没错，要是能调微信api的需求，当然就不用上面这么麻烦了O(∩_∩)O~
over
转载请注明出处：http://www.jiangkl.com/2022/01/h5_file_multiple
这些年个人电脑的配置逐渐提高，服务器的配置反而停滞不前，自己手头的笔记本早就16G内存了，可公司用的阿里云的服务器，8G内存已经算“较高配置”了。。。
作为php、mysql之类的服务器，8G确实够用了，可做pandas数据分析，就不一定了，这不现在要做一个月度数据分析，要加载一个月的订单量，大概五千万量级，在本地虽然慢点，但结果都能跑出来，可到了服务器上，虽然linux开了虚拟内存，可不但比本地慢很多，还经常跑到半截被“killed”掉了。。。
“你被终结了，蠢货”，每到这个时候，就想起了星际里雷神的这句台词 O(∩_∩)O哈哈~
本地跑的时候，大概会占用12G内存，精简了不必要的字段以后，降低到了9G，还是不行，于是开始招其他能够降低内存占用的方法，比较有效的是修改数据类型，不过试了几次，int64改int16、int32，都没有效果，只有下面这个，让内存占从9G降低到了7、8G：
df['hour'] = df['hour'].astype(‘category’)
hour字段原本是字符串类型，直接.info()，显示是object，变成category以后，确实能节约不少空间
—————–先写到这里，后续验证有效的能减少内存占用的方法会持续更新（2021年12月21日17:07:05）
双轴折线图，适合显示有两组不同类型，或者幅度差异较大的数据，这里展示的是一个对pandas生产双轴折线图的封装。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | import matplotlib.pyplot as plt from matplotlib.font_manager import FontProperties # figsize 输出尺寸，默认1000×300 # savePath 保存路径 # title 折线图上显示的标题 # rightColumns 放在右侧的字段 # leftLabel rightLabel 左右标签 def buildChartLine(dataDf, savePath, xInd='日期', figsize=(10, 3), title='', rightColumns=[], leftLabel='', rightLabel='', colors=[]): if isLocalServ(): # macos本地的中文配置 plt.rcParams['font.sans-serif'] = ['SimHei'] plt.rcParams['axes.unicode_minus'] = False else: # Linux的中文配置 tfont = FontProperties(fname=r"/usr/share/fonts/simhei.ttf", size=14) dataDf.sort_values(xInd, inplace=True) # 确保顺序 dataDf = dataDf.copy() dataDf.set_index(xInd, inplace=True) # 确保索引x轴字段名 if len(colors) == 0: #TODO: 自定义颜色策略 print('no color') plt.figure() if isLocalServ(): # macos本地的中文配置，和下面else里的，主要还是中文配置的差异，其他相同 if len(rightColumns) > 0: ax = dataDf.plot(secondary_y=rightColumns, figsize=figsize, color=colors, kind='line') ax.right_ax.set_ylabel(rightLabel) else: ax = dataDf.plot(figsize=figsize, color=colors, kind='line') ax.set_ylabel(leftLabel) if len(title) > 0: ax.set(title=title) ax.legend(loc=2) plt.legend(loc=1) else: if len(rightColumns) > 0: ax = dataDf.plot(secondary_y=rightColumns, figsize=figsize, color=colors, kind='line') ax.right_ax.set_ylabel(rightLabel, fontproperties=tfont) else: ax = dataDf.plot(figsize=figsize, color=colors, kind='line') ax.set_ylabel(leftLabel, fontproperties=tfont) if len(title) > 0: plt.title(title, fontproperties=tfont) ax.legend(loc=2, prop=tfont) plt.legend(loc=1, prop=tfont) # plt.show() #直接显示折线图 plt.savefig(savePath) |
使用示例
1 2 3 4 5 6 7 | dataDf = pd.DataFrame({ '日期': ['2021-11-01', '2021-11-02', '2021-11-04', '2021-11-06', '2021-11-03', '2021-11-05'], '风力': [3, 4, 5, 7, 9, 1], '最高温度': [13, 24, 25, 27, 19, 21], '最低温度': [1, 4, 5, 7, 9, 2]}, columns=['日期', '风力', '最高温度', '最低温度']) buildChartLine(dataDf, 'dayInfo', xInd='日期', figsize=(10, 3), title='气象记录', rightColumns=['风力'], leftLabel='温度（℃）', rightLabel='风力（级）', colors=['#fb0320', '#e50ce2', '#770ce5']) |
实际效果：
小结：搞定这个双轴折线图过程中，主要碰到了两个问题：
1. pandas plot网上资料很多，但可能是因为版本的问题，大部分直接拿过来用，是用不了的，最终拼凑出上面的方法
2. linux里中文的解决。本来想让运维协助配置linux本地字库，无奈运维搞了半天也没效果，最终只能写死字库位置这个方案；另外一个比较坑的地方，同样是字体的定义，label/title那里参数名叫fontproperties，到了legend又叫prop。。。
—–
over
转载请注明出处：http://www.jiangkl.com/2021/12/pandas_iine_font/
关于本站