微信小程序 - 曲线图

最新推荐文章于 2023-09-11 15:07:50 发布

Anjjiewm

最新推荐文章于 2023-09-11 15:07:50 发布

阅读量8.1k

点赞数 7

分类专栏： canvas 小程序文章标签：小程序 canvas

本文链接：https://blog.csdn.net/Anjjiewm/article/details/84534768

版权

本文介绍了作者在微信小程序项目中自行为数据展示创建曲线图的过程。分享了包含wxml和js代码的实现方法。

摘要由CSDN通过智能技术生成

微信小程序 - 曲线图

最近要做微信小程序，项目中需要曲线图显示数据，所以在网上看了一下找了很久都没有找到一个，不知道是我查找的姿势不对，还是什么的。所以就自己做了一个曲线图，现在分享给大家。
在这里插入图片描述
不啰嗦，直接上代码：

wxml代码:

<canvas canvas-id='curve-img' style='width:{
  {canvasWidth}}px;height:{
  {canvasHeight}}px;'></canvas>

js代码：

// pages/canvas/index.js
Page({
canvasIdErrorCallback: function(e) {
 console.error(e);
},
/**
* 页面的初始数据
*/
data: {
 canvasWidth: 0,
 canvasHeight: 300,
 canvasDefaultVal: {
   maxVal: 0,
   totalData: 0,
   data: []
 }
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function(e) {
 var _this = this;
 wx.getSystemInfo({
   success: function(res) {
     _this.setData({
       canvasWidth: res.windowWidth - 3
     });
   },
 })
},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
 var ctx