微信小程序基于wepy使用canvas简单的画波柱状图

starsfun 发布于2019-08-22 15:50 / 879人阅读

摘要：参考了这里只是给自己简单的记录下代码发现很多变量不知道咋称呼它意会意会全局定义一个轴数据源是轴的刻度数量刻度线

参考了 https://www.cnblogs.com/yxysu...
这里只是给自己简单的记录下代码
发现很多变量不知道咋称呼它 - -
意会意会

全局定义一个

const cx = wepy.createCanvasContext("chart")

    drawChart() {
      // 轴
      let grades = [7,8,6,10,8,5,7,30,1,8,5,7,5,1,8,12,52,12,49,30,12] //数据源
      let max = Math.max.apply(null,grades);
      let min = Math.min.apply(null,grades);
      this.Ydiff = max-min
      let xW = this.Xwidth / grades.length
      this.$apply()
      let kedu = Math.round((max-min) / 10) // 10是y轴的刻度数量
      this.drawLine(0,0,300,0,0.5,"#999999")
      this.drawLine(0,200,0,-80,0.5,"#999999")
      // 刻度线
      for(let i=kedu; i<=max; i=i+kedu){
        cx.fillText(i,this.x(-15),this.y(this.gg(i))+10)
        this.drawLine(0,this.gg(i),250,this.gg(i),0.5,"#eee")
      }
      let color = []
      for (let i in grades ) {
        color[i] = this.getRandomColor()
      }
      for(let i=xW,j=0;j
    x(x) {
      return x + 20
    }
    y(y) {
      return 300-y
    }
    g(grade) {
      return 15 * grade;
    }
    gg(grade) {
      return 200 / this.Ydiff * grade
    }
    drawLine(b_x, b_y, e_x, e_y, width, color) {
      cx.strokeStyle = color
      cx.lineWidth = width
      cx.beginPath()
      cx.moveTo(this.x(b_x), this.y(b_y))
      cx.lineTo(this.x(e_x), this.y(e_y))
      cx.closePath()
      cx.stroke()
    }
    getRandomColor() {
      let color = "#"
      let alArr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f"],
      for (let i = 0; i < 6; i++) {
        color += alArr[Math.floor(Math.random() * (16))]
      }
      return(color)
    }

GPU云服务器云服务器微信小程序怎么使用怎样使用微信小程序如何使用微信小程序微信小程序如何在电脑上使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93798.html

【开源】基于微信小程序 Canvas API 实现的柱状图和趋势图

摘要：所以调用者可以根据自己业务的需要添加信息，但有些字段是必须的数字比如是日期调用者根据业务需要添加任意字段的数据结构吃喝调用者根据业务需要添加任意字段示意图体验扫描进小程序天天随手记账记一笔账回到首页点左下角图标。 wechat-chart 基于微信小程序 Canvas API 实现的柱状图和趋势图 GitHub 地址用法 let Line = require(../../utils/...

OBKoro1 2019-08-20 13:54 评论0 收藏0
微信小程序：截图组件welCropper，实现原理及其使用

摘要：最近做项目的时候，需要做一个截图功能。因为所以，就自己动手写了一个截图组件。下面介绍一下实现原理和使用方法。用来绘制适应屏幕比例大小的图片，因为通常原图大小是超过屏幕长宽的。 showImg(http://upload-images.jianshu.io/upload_images/2158535-2c383e1129188a2a.png?imageMogr2/auto-orient/...

jay_tian 2019-08-21 16:41 评论0 收藏0
微信小程序资源汇总

awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合。我们会定期同步上的项目到这里，也欢迎各位 UI组件开发框架实用库开发工具服务端项目实例Demo UI组件 weui-wxss ★1873 - 同微信原生视觉体验一致的基础样式库zanui-weapp ★794 - 好用易扩展的小程序 UI 库wx-charts ★449 - 微信小程...

Olivia 2019-08-21 17:48 评论0 收藏0
小程序开发坑点总结

摘要：整个小程序所有分包大小不超过单个分包主包大小不能超过微信小程序主流框架对比应该算是最早发布的小程序开发框架，提供了类的语法风格和特性，现阶段应该也是应用最广泛的框架吧。不过微信官方为了防止下载离线包的时间过程，也严格限制了小程序包的体积。那些年我们踩过的坑css样式不能引用本地图片资源，只能引用线上资源(background-image)，引用本地图片资源只能用标签。{{}}不能执行...

lowett 2019-08-30 15:44 评论0 收藏0
微信小程序中生成二维码工具：weapp.qrcode.js

摘要：前言在近期的小程序开发中，有一个离线生成二维码的需求。所以，针对微信小程序的特点，封装了，用于在小程序中快速生成二维码。由于小程序没有动态创建标签的，所以这一步不能省略。调用绘制方法由于微信小程序不支持引入包，可以将目录下，拷贝至项目中。前言在近期的小程序开发中，有一个离线生成二维码的需求。当时想到了一些优秀的前端开源库 jquery-qrcode 和 node-qrcode，由于...

MarvinZhang 2019-08-26 11:35 评论0 收藏0