Author Archives: jkl

cocos加载网络图片

    其实就是个简单的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获得的权限越来越多。这里使用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

pandas降低内存占用小技巧

这些年个人电脑的配置逐渐提高,服务器的配置反而停滞不前,自己手头的笔记本早就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双轴折线图生产与中文显示

双轴折线图,适合显示有两组不同类型,或者幅度差异较大的数据,这里展示的是一个对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/