資訊專欄INFORMATION COLUMN
摘要：參考了這里只是給自己簡單的記錄下代碼發(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)
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/93798.html
摘要：所以調(diào)用者可以根據(jù)自己業(yè)務(wù)的需要添加信息，但有些字段是必須的數(shù)字比如是日期調(diào)用者根據(jù)業(yè)務(wù)需要添加任意字段的數(shù)據(jù)結(jié)構(gòu)吃喝調(diào)用者根據(jù)業(yè)務(wù)需要添加任意字段示意圖體驗(yàn)掃描進(jìn)小程序天天隨手記賬記一筆賬回到首頁點(diǎn)左下角圖標(biāo)。 wechat-chart 基于微信小程序 Canvas API 實(shí)現(xiàn)的柱狀圖和趨勢圖 GitHub 地址 用法 let Line = require(../../utils/...
摘要：最近做項(xiàng)目的時(shí)候，需要做一個截圖功能。因?yàn)樗?，就自己動手寫了一個截圖組件。下面介紹一下實(shí)現(xiàn)原理和使用方法。用來繪制適應(yīng)屏幕比例大小的圖片，因?yàn)橥ǔＴ瓐D大小是超過屏幕長寬的。 showImg(http://upload-images.jianshu.io/upload_images/2158535-2c383e1129188a2a.png?imageMogr2/auto-orient/...
摘要：整個小程序所有分包大小不超過單個分包主包大小不能超過微信小程序主流框架對比應(yīng)該算是最早發(fā)布的小程序開發(fā)框架，提供了類的語法風(fēng)格和特性，現(xiàn)階段應(yīng)該也是應(yīng)用最廣泛的框架吧。不過微信官方為了防止下載離線包的時(shí)間過程，也嚴(yán)格限制了小程序包的體積。 那些年我們踩過的坑css樣式不能引用本地圖片資源，只能引用線上資源(background-image)，引用本地圖片資源只能用標(biāo)簽。{{}}不能執(zhí)行...
摘要：前言在近期的小程序開發(fā)中，有一個離線生成二維碼的需求。所以，針對微信小程序的特點(diǎn)，封裝了，用于在小程序中快速生成二維碼。由于小程序沒有動態(tài)創(chuàng)建標(biāo)簽的，所以這一步不能省略。調(diào)用繪制方法由于微信小程序不支持引入包，可以將目錄下，拷貝至項(xiàng)目中。 前言 在近期的小程序開發(fā)中，有一個離線生成二維碼的需求。當(dāng)時(shí)想到了一些優(yōu)秀的前端開源庫 jquery-qrcode 和 node-qrcode，由于...
閱讀 1604·2021-09-22 15:35
閱讀 2093·2021-09-14 18:04
閱讀 965·2019-08-30 15:55
閱讀 2512·2019-08-30 15:53
閱讀 2747·2019-08-30 12:45
閱讀 1266·2019-08-29 17:01
閱讀 2641·2019-08-29 15:30
閱讀 3566·2019-08-29 15:09
