微信小程序折线图显示小程序云数据库数据

最新推荐文章于 2024-08-23 11:53:33 发布

置顶这是我的自己

最新推荐文章于 2024-08-23 11:53:33 发布

阅读量2k

点赞数 4

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

本文链接：https://blog.csdn.net/weixin_41355989/article/details/106034093

版权

小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

学习过程中的笔记。

显示效果图：
在这里插入图片描述
1.在github上下载一个js文件放在微信小程序的utils文件夹下。
点击跳转github地址
2.在chart.js上导入

var wxCharts=require('../../utils/wxcharts.js');

3.打开云开发平台
在这里插入图片描述
4.数据库里添加集合名称，并且添加需要显示的数据信息。

这样基本工作就可以了，下面是数据库信息的处理和显示。看代码理解

chart.js完整代码：

// pages/warn/warn.js
var wxCharts=require('../../utils/wxcharts.js');
var app =getApp();
var daylineChart=null;
var yuelineChart=null;
const DB = wx.cloud.database().collection("sersor-data");
Page({
  /**   * 页面的初始数据   */  
  data: {
  datalist:[]
  },   
  getMothElectro: function () {    
  	var that = this;    
  	//sersor-data为要显示的云数据库的集合名称    				wx.cloud.database().collection("sersor-data").get({      
  	success(res) {        
  		console.log("请求成功", res)        
  	that.setData({          
  		datalist: res.data        
  	})        
  	console.log("123", that.data.datalist)        
  	var legendList = []        
  //数据库循环数据找出要显示的LightLux字段并加入到数组legendList = []中。
      for (var i in that.data.datalist) {
      //我需要显示的是查询的数组中reult数据中的LightLux值，根据自己的数据改动          
  	var obj = that.data.datalist[i].result.LightLux;
  	          	legendList.push(obj)          
 			 var windowWidth = 320;          
  try {            
  	var res = wx.getSystemInfoSync();            
  	windowWidth = res.windowWidth;          
  } catch (e) {            
  	console.error('getSystemInfoSync failed!');          
  	}          
  	yuelineChart = new wxCharts({            
 	 canvasId: 'yueEle',  //canvas名称          
  	type: 'line',            
  categories: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24'], //categories X轴            
  	animation: true,                    
  	series: [{              
  		name: '光照强度',              
 	 	//data: yuesimulationData.data,              
  		data: legendList,//折线图数据显示              
  	format: function (val, name) {                
  	return val.toFixed(2) + 'kWh';              
  },
            }],
  xAxis: {              
           disableGrid: true            
           },           
  yAxis: {             
   title: '数据',              
   format: function (val) {               
    	return val.toFixed(2);             
     },              
    max: 20,              
    min: 0         /   
    },            
    width: windowWidth,            
    height: 400,            
    dataLabel: false,            
    dataPointShape: true,            
    extra: {              
    lineStyle: 'curve'            
    }          
    });
        
       		}      
        },      
        fail(res) {        
        console.log("请求失败", res)      
        }    
     })  
},


  yueTouchHandler: function (e) { //点击显示详细信息    yuelineChart.showToolTip(e, { //showToolTip图表中展示数据详细内容      background: '#7cb5ec',      
  format: function (item, category) {        
  return category + '时 ' + item.name + ':' + item.data      
  }   
   }); 
    },

  /**   * 生命周期函数--监听页面加载   */  
  onLoad: function (options) {    
  this.getMothElectro();//加载当月用电
  },
   })

chart.wxml

<!--pages/warn/warn.wxml-->
<canvas
  style="width: 100%; height: 700px;"
  canvas-id="yueEle"
  binderror="canvasIdErrorCallback"  bindtouchstart="yueTouchHandler"  ></canvas>