当前位置: 首页>编程笔记>正文

微信復制別人的話中間有虛線,微信小程序——繪制折線圖

微信復制別人的話中間有虛線,微信小程序——繪制折線圖

一、wxml

<view class="canvas-view"><canvas class="canvas" canvas-id="canvasId"></canvas>
</view>

二、wxss

.canvas-view{height: 100%;display: flex;align-items: center;margin-top: 48rpx;
}
.canvas{width: 100%;height: 640rpx;
}

微信復制別人的話中間有虛線、三、json

{"component": true,"usingComponents": {}
}

四、js

const app = getApp()Page({data: {list: [50, 150, 170, 200, 100, 267, 20, 50, 130, 124],h32: 32,h64: 64,h360: 360,h420: 420,s28: 28,s18: 18,//Y軸分成的大分段heightLineNum: 7,//X軸分成的大分段widthLineNum: 10,//Y軸一個分段的值yOneDuan: 50},onLoad: function (options) {//折線圖this.initChart()},// 初始化折線圖initChart: function () {const ctx = wx.createCanvasContext('canvasId')ctx.beginPath()ctx.setStrokeStyle('#000000')ctx.setFillStyle('#FFFFFF')ctx.setLineWidth(1)//坐標原點,Y軸坐標值從上往下是增加const leftBottomX = this.getEleWidth(this.data.h64)const leftBottomY = this.getEleWidth(this.data.h360)//Y坐標const leftTopX = this.getEleWidth(this.data.h64)const leftTopY = this.getEleWidth(this.data.h32)//X坐標const rightBottomX = this.getEleWidth(this.data.h420)const rightBottomY = this.getEleWidth(this.data.h360)const yHeight = this.getEleWidth(this.data.h360 - this.data.h32)const xWidth = this.getEleWidth(this.data.h420 - this.data.h64)//從Y軸坐標開始畫坐標系//Y軸坐標到原點坐標畫出Y軸線//畫完Y軸線,再從原點坐標到X軸坐標畫出X軸線ctx.moveTo(leftTopX, leftTopY)ctx.lineTo(leftBottomX, leftBottomY)ctx.lineTo(rightBottomX, rightBottomY)//設置字體大小ctx.setFontSize(this.getEleWidth(this.data.s28))//設置字的位置ctx.fillText("光伏總電量及總用電量曲線", this.getEleWidth(63), this.getEleWidth(32))//劃分Y軸this.drawYScale(ctx);//劃分X軸this.drawXScale(ctx);//畫折線this.drawCharts(ctx);ctx.stroke()ctx.draw(true)},//劃分Y軸drawYScale: function (ctx) {var that = this;//Y軸坐標刻度橫坐標起點var scaleStartX = this.getEleWidth(this.data.h64)//長的刻度var scaleEndX = this.getEleWidth(this.data.h64 + 18)//短的刻度var littleScaleEndX = this.getEleWidth(this.data.h64 + 9)//Y軸刻度總高度const yHeight = this.getEleWidth(this.data.h360)//一個大分段的長度,一共分為6段var oneScaleX = yHeight / this.data.heightLineNum//大分段數字字體大小ctx.setFontSize(this.getEleWidth(this.data.s18))//大分段數字位置橫坐標var textX = this.getEleWidth(this.data.h64 - 42)//大分段,長刻度:50-300for (var i = 1; i < this.data.heightLineNum; i++) {var scaleEndY = yHeight - oneScaleX * i//畫長刻度線條ctx.moveTo(scaleStartX, scaleEndY)ctx.lineTo(scaleEndX, scaleEndY)ctx.fillText(this.data.yOneDuan * i, textX, scaleEndY + this.getEleWidth(10))var littleScaleStartY = yHeight - oneScaleX * (i - 1)//小分段,短刻度for (var j = 1; j < 5; j++) {var littleScaleEndY = littleScaleStartY - (oneScaleX / 5) * j//畫短刻度線條ctx.moveTo(scaleStartX, littleScaleEndY)ctx.lineTo(littleScaleEndX, littleScaleEndY)ctx.stroke();}}//高和低虛線Y軸坐標const lowlimitLineY = yHeight - oneScaleX * 2const middlelimitLineY = yHeight - oneScaleX * 4const highlimitLineY = yHeight - oneScaleX * 6//虛線總長度const rightBottomX = this.getEleWidth(this.data.h420)const space = this.getEleWidth(10)//限制虛線that.drawDashLine(ctx, scaleStartX, lowlimitLineY, rightBottomX, lowlimitLineY, space)that.drawDashLine(ctx, scaleStartX, middlelimitLineY, rightBottomX, middlelimitLineY, space)that.drawDashLine(ctx, scaleStartX, highlimitLineY, rightBottomX, highlimitLineY, space)},//劃分X軸drawXScale: function (ctx) {var that = this;//虛線總高度var scaleStartY = this.getEleWidth(that.data.h360)//虛線頂點Y軸高度var scaleEndY = this.getEleWidth(that.data.h32)//X軸總長度=X軸橫坐標-向右偏移長度const xWidth = this.getEleWidth(that.data.h420 - that.data.h64)//X軸起始點const xMaginLeft = this.getEleWidth(that.data.h64)//一個分段的寬度const oneScaleX = xWidth / (that.data.widthLineNum + 1)const space = this.getEleWidth(10)for (var i = 0; i < that.data.widthLineNum + 1; i++) {var toEndX = xMaginLeft + oneScaleX * i;if (i > 0) {that.drawDashLine(ctx, toEndX, scaleStartY, toEndX, scaleEndY, space)}ctx.fillText(i, toEndX - this.getEleWidth(5), scaleStartY + this.getEleWidth(30))}},//畫虛線drawDashLine: function (ctx, x1, y1, x2, y2, dashLength) {//傳context對象,始點x和y坐標,終點x和y坐標,虛線長度ctx.beginPath()ctx.setLineWidth(0.5)var dashLen = dashLength === undefined ? 3 : dashLength,//得到橫向的寬度;xpos = x2 - x1,//得到縱向的高度;ypos = y2 - y1,numDashes = Math.floor(Math.sqrt(xpos * xpos + ypos * ypos) / dashLen);//利用正切獲取斜邊的長度除以虛線長度,得到要分為多少段;for (var i = 0; i < numDashes; i++) {if (i % 2 === 0) {ctx.moveTo(x1 + (xpos / numDashes) * i, y1 + (ypos / numDashes) * i);//有了橫向寬度和多少段,得出每一段是多長,起點 + 每段長度 * i = 要繪制的起點;} else {ctx.lineTo(x1 + (xpos / numDashes) * i, y1 + (ypos / numDashes) * i);}}ctx.stroke();},//畫折線drawCharts: function (ctx) {ctx.beginPath()ctx.setStrokeStyle("#FFFFFF")var that = this;var list = that.data.list;const yHeight = this.getEleWidth(that.data.h360)const xWidth = this.getEleWidth(that.data.h420 - this.data.h64)//X坐標,一個空格的值const oneScaleX = xWidth / (that.data.widthLineNum + 1)//Y坐標,一個空格的值var oneScaleY = yHeight / this.data.heightLineNum;for (var i = 0; i < list.length; i++) {var height = list[i];//計算X坐標var x = oneScaleX * (i + 1) + this.getEleWidth(that.data.h64);//計算Y坐標var y = yHeight - oneScaleY / this.data.yOneDuan * heightif (i == 0) {ctx.moveTo(x, y)} else {ctx.lineTo(x, y)}}ctx.stroke()ctx.draw(true)},//獲取屏幕自適應寬度getEleWidth: function (w) {var real = 0;try {var res = wx.getSystemInfoSync().windowWidth;//以寬度480px設計做寬度的自適應var scale = (480 / 2) / (w / 2);real = Math.floor(res / scale);return real;} catch (e) {return false;}}
})

https://www.nshth.com/bcbj/326208.html
>

相关文章:

  • 微信復制別人的話中間有虛線
  • 微信步數虛線后來又有步數了
  • 微信步數曲線圖虛線
  • word表格生成折線圖
  • 折線圖怎么做
  • 折線圖
  • excel折線圖
  • 折線圖在線制作
  • 編程語言難度排名,8 月最新編程語言排行榜
  • 手機usb調試被禁用怎么恢復,解決安卓手機USB接口被外設占用導致無法調試的問題
  • 手機上的安卓模擬器,連接手機模擬器
  • 搜狗輸入法怎么手寫和拼音一起輸入,零彝輸入法用戶協議
  • ubuntu自帶gcc編譯器嗎,安裝ubuntu20.04(安裝vim、gcc、VMtools、中文輸入法、漢化、修改IP、無法連網問題)
  • 輸入法哪個最好用,android ip格式化輸入法,Android設置默認輸入法
  • blkmov指令使用例子,ORB-SLAM2代碼解析
  • windows補丁kb3033929怎么安裝,Win8.1 kb2919355安裝不上怎么辦?
  • 淘寶店鋪如何增加流量,淘寶賣家開店怎么做有效減少淘寶垃圾流量
  • 商標使用必須加TM或R嗎,商標中R標和TM標的區別
  • 沒有商標可以上速賣通嘛,速賣通商標授權怎么弄?速賣通官方授權模板書分享
  • 商標中R跟C分別代表什么,商標TM和R有什么區別
  • 商標中R跟C分別代表什么,CSDN Markdown 商標標志 C、TM、R
  • 有關向量的重要結論,專題-句向量(Sentence Embedding)
  • 信息安全等級保護的5個級別,信息安全等級保護措施之網絡安全技術
  • 書是黃金屋下一句是什么,書中的“黃金屋”
  • gps定位,定位iowait問題
  • 渲染軟件哪個好用,Android平臺上基于OpenGl渲染yuv視頻
  • C# wpf 通過HwndHost渲染視頻
  • h5商城源碼,H5全新紅包直通車網站源碼 包含多款游戲已對接支付
  • android基礎面試題及答案,安卓手機系統開發教程!BTAJ面試有關散列(哈希)表的面試題詳解,大廠直通車!
  • 中交第一公路勘察設計研究院,緯地道路縱斷面設計教程_直通車 | 中交一公局公路勘察設計院有限公司招聘公告...
  • arduino怎么把程序傳到板上,STM32替換Arduino直通車
  • 記錄2015年年初跳槽的經歷!
  • 什么情況下可以跳槽,記錄 2015 年年初跳槽的經歷!
  • 聚合支付公司前十,聚合支付行業的2019年終總結大會!細品,你細品~
  • mastercam后處理論壇,mastercam2017后處理升級_如何升級Mastercam 9.1版后處理?
  • 動態表情包制作,android 視頻轉表情,視頻怎么轉gif?好用軟件分享,自己也能制作出搞笑表情包...
  • pc頁面怎么打開,頁面的版心html,關于PC端網頁版心及網頁自適應問題
  • webp圖片怎樣改成jpg,如何給圖片更改格式?jpg轉webp怎么操作