【wxcharts】从数据库取数据动态渲染
首先在wxml给出一个canvas
·
首先在wxml给出一个canvas
<canvas canvas-id="lineCanvas" disable-scroll="true" class="canvas" bindtouchstart="touchcanvas"></canvas>
wxss描述样式
.canvas {
position: absolute;
width: 100%;
height: 100%;
top: 10%;
}
在js文件中引入文件,并且定义canvas-id,在data中定义color:
var wxCharts = require('../../utils/wxcharts.js');
const app = getApp()
var lineChart = null;
data: {
textcolor: '#014f8e',
//从缓存中取数据时,现在data中定义
name:'',
//折线图所展示的数值
min:'',
},
在onShow中加载:
onShow: function () {
this.canvas1_click()
},
canvas1_click: function () {
var that = this
this.setData({
textcolor: '#014f8e',
})
var oppenid = wx.getStorageSync('name');//此处为取出在缓存中的数值
var xArr = ["1-2", "3-4", "5-6", "7-8", "9-10", "11-12", "13-14", "15-16", "17-18", "19-20", "21-22", "23-24", "25-26", "27-28", "29-30"]
var yArr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
wx.request({
url: '',//此处为后台接口
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded',
},
data: {
//由于后台查询数据时需要前端传数据,放在data中
//这里的name是从缓存中取出来的
name: name
},
success: function (res) {
//接口中的数组表现为data{sps{heightArray[1,2,3,4,5,6]}}
//拆分的时候用split(',')
let tempArr = res.data.sps['heightArray'].split(',')
for (var i = 0; i < tempArr.length; i++) {
yArr[i] = tempArr[i]
}
that.setData({
//折线图所展示的数据
min: tempArr.sort()[0],
})
},
fail: function (res) {
wx.hideLoading()
wx.showToast({
title: '请稍后重试',
icon: 'none',
duration: 1500
})
}
})
this.canvasChart(xArr, yArr, '高度')
},
图表点击事件:
touchcanvas: function (e) {
lineChart.showToolTip(e, {
format: function (item) {
return item.name + ':' + item.data
}
});
},
绘制图表:
canvasChart: function (x_data, y_data, name) {
console.log(y_data)
var windowWidth = '',
windowHeight = ''; //定义宽高
try {
var res = wx.getSystemInfoSync(); //试图获取屏幕宽高数据
windowWidth = res.windowWidth / 750 * 690; //以设计图750为主进行比例算换
windowHeight = res.windowWidth / 750 * 550; //以设计图750为主进行比例算换
} catch (e) {
console.error('getSystemInfoSync failed!'); //如果获取失败
}
lineChart = new wxCharts({
canvasId: 'lineCanvas',
type: 'line',
categories: x_data,
animation: true,
series: [{
name: name,
data: y_data,
format: function (val, name) {
return val + 'cm';
}
}, ],
xAxis: {
disableGrid: true
},
yAxis: {
title: '高度',
format: function (val) { //返回数值
return val + 'cm';
},
max: 20,
min: 0
},
width: windowWidth,
height: windowHeight,
dataLabel: false,
dataPointShape: true,
extra: {
lineStyle: 'curve'
}
});
},
借鉴:http://t.csdn.cn/03Dwv
var wxCharts = require('../../utils/wxcharts.js');
var lineChart = null;
Page({
data:{
textcolor1:'#014f8e',
textcolor2:'#bfbfbf',
},
onLoad:function(){
//下面是图表一显示的数据,只需替换掉数据折现就会发生变化实现动态生成
var x_data=["12-05", "12-06", "12-07", "12-08", "12-09", "12-10", "12-11", "12-12", "12-13", "12-14", "12-15", "12-16", "12-17", "12-18", "12-19"]
var y_data= ["2710778.83", "3701004.17", "1959107.37", "1875401.10", "1844007.76", "1927753.07", "2214439.68", "2501855.64", "2348521.30", "1815527.72", "1938038.04", "1911152.88", "2062097.59", "2397674.45", "2796167.86"]
//绘制折线图
this.OnWxChart(x_data,y_data,'图表一')
},
//更换折线图数据为图表一数据
canvas1_click:function(){
this.setData({
textcolor1:'#014f8e',
textcolor2:'#bfbfbf',
})
var x_data=["12-05", "12-06", "12-07", "12-08", "12-09", "12-10", "12-11", "12-12", "12-13", "12-14", "12-15", "12-16", "12-17", "12-18", "12-19"]
var y_data= ["2710778.83", "3701004.17", "1959107.37", "1875401.10", "1844007.76", "1927753.07", "2214439.68", "2501855.64", "2348521.30", "1815527.72", "1938038.04", "1911152.88", "2062097.59", "2397674.45", "2796167.86"]
//绘制折线图
this.OnWxChart(x_data,y_data,'图表一')
},
//更换折线图数据为图表二数据
canvas2_click:function(){
this.setData({
textcolor1:'#bfbfbf',
textcolor2:'#014f8e',
})
var x_data=["1", "2", "3", "4", "5", "6", "7", "8", "9"]
var y_data= ["113", "620", "332", "540", "580", "580", "603", "100", "605"]
//绘制折线图
this.OnWxChart(x_data,y_data,'图表二')
},
//图表点击事件
touchcanvas:function(e){
lineChart.showToolTip(e, {
format: function (item, category) {
return category + ' ' + item.name + ':' + item.data
}
});
},
//折线图绘制方法
OnWxChart:function(x_data,y_data,name){
var windowWidth = '', windowHeight=''; //定义宽高
try {
var res = wx.getSystemInfoSync(); //试图获取屏幕宽高数据
windowWidth = res.windowWidth / 750 * 690; //以设计图750为主进行比例算换
windowHeight = res.windowWidth / 750 * 550 //以设计图750为主进行比例算换
} catch (e) {
console.error('getSystemInfoSync failed!'); //如果获取失败
}
lineChart = new wxCharts({
canvasId: 'lineCanvas', //输入wxml中canvas的id
type: 'line',
categories:x_data, //模拟的x轴横坐标参数
animation: true, //是否开启动画
series: [{
name: name,
data: y_data,
format: function (val, name) {
return val + '元';
}
}
],
xAxis: { //是否隐藏x轴分割线
disableGrid: true,
},
yAxis: { //y轴数据
title: '', //标题
format: function (val) { //返回数值
return val.toFixed(2);
},
min: 400000.00, //最小值
gridColor: '#D8D8D8',
},
width: windowWidth*1.1, //图表展示内容宽度
height: windowHeight, //图表展示内容高度
dataLabel: false, //是否在图表上直接显示数据
dataPointShape: true, //是否在图标上显示数据点标志
extra: {
lineStyle: 'Broken' //曲线
},
});
}
})
更多推荐
所有评论(0)