微信小程序基于wepy使用canvas簡單的畫波柱狀圖

starsfun 發(fā)布于2019-08-22 15:50 / 928人閱讀

摘要：參考了這里只是給自己簡單的記錄下代碼發(fā)現(xiàn)很多變量不知道咋稱呼它意會意會全局定義一個軸數(shù)據(jù)源是軸的刻度數(shù)量刻度線

參考了 https://www.cnblogs.com/yxysu...
這里只是給自己簡單的記錄下代碼
發(fā)現(xiàn)很多變量不知道咋稱呼它 - -
意會意會

全局定義一個

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] //數(shù)據(jù)源
      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軸的刻度數(shù)量
      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云服務器微信小程序怎么使用怎樣使用微信小程序如何使用微信小程序微信小程序如何在電腦上使用

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/93798.html

【開源】基于微信小程序 Canvas API 實現(xiàn)的柱狀圖和趨勢圖

摘要：所以調用者可以根據(jù)自己業(yè)務的需要添加信息，但有些字段是必須的數(shù)字比如是日期調用者根據(jù)業(yè)務需要添加任意字段的數(shù)據(jù)結構吃喝調用者根據(jù)業(yè)務需要添加任意字段示意圖體驗掃描進小程序天天隨手記賬記一筆賬回到首頁點左下角圖標。 wechat-chart 基于微信小程序 Canvas API 實現(xiàn)的柱狀圖和趨勢圖 GitHub 地址用法 let Line = require(../../utils/...

OBKoro1 2019-08-20 13:54 評論0 收藏0
微信小程序：截圖組件welCropper，實現(xiàn)原理及其使用

摘要：最近做項目的時候，需要做一個截圖功能。因為所以，就自己動手寫了一個截圖組件。下面介紹一下實現(xiàn)原理和使用方法。用來繪制適應屏幕比例大小的圖片，因為通常原圖大小是超過屏幕長寬的。 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組件開發(fā)框架實用庫開發(fā)工具服務端項目實例Demo UI組件 weui-wxss ★1873 - 同微信原生視覺體驗一致的基礎樣式庫zanui-weapp ★794 - 好用易擴展的小程序 UI 庫wx-charts ★449 - 微信小程...

Olivia 2019-08-21 17:48 評論0 收藏0
小程序開發(fā)坑點總結

摘要：整個小程序所有分包大小不超過單個分包主包大小不能超過微信小程序主流框架對比應該算是最早發(fā)布的小程序開發(fā)框架，提供了類的語法風格和特性，現(xiàn)階段應該也是應用最廣泛的框架吧。不過微信官方為了防止下載離線包的時間過程，也嚴格限制了小程序包的體積。那些年我們踩過的坑css樣式不能引用本地圖片資源，只能引用線上資源(background-image)，引用本地圖片資源只能用標簽。{{}}不能執(zhí)行...

lowett 2019-08-30 15:44 評論0 收藏0
微信小程序中生成二維碼工具：weapp.qrcode.js

摘要：前言在近期的小程序開發(fā)中，有一個離線生成二維碼的需求。所以，針對微信小程序的特點，封裝了，用于在小程序中快速生成二維碼。由于小程序沒有動態(tài)創(chuàng)建標簽的，所以這一步不能省略。調用繪制方法由于微信小程序不支持引入包，可以將目錄下，拷貝至項目中。前言在近期的小程序開發(fā)中，有一個離線生成二維碼的需求。當時想到了一些優(yōu)秀的前端開源庫 jquery-qrcode 和 node-qrcode，由于...

MarvinZhang 2019-08-26 11:35 評論0 收藏0