微信小程序折线图显示小程序云数据库数据 |
您所在的位置：网站首页 › 巴法云平台怎么样得到传感器信息 › 微信小程序折线图显示小程序云数据库数据 |
微信小程序折线图显示小程序云数据库数据
|
学习过程中的笔记。 显示效果图： 3.打开云开发平台 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 |
1.在github上下载一个js文件放在微信小程序的utils文件夹下。 点击跳转github地址 2.在chart.js上导入
4.数据库里添加集合名称，并且添加需要显示的数据信息。 
这样基本工作就可以了，下面是数据库信息的处理和显示。看代码理解【本文地址】