您的位置: 首页  >  文章  >  微信小程序+Servlet后台开发（四）

微信小程序+Servlet后台开发（四）

分类: 文章 • 2025-02-01 13:24:04

微信小程序+Servlet后台开发（四）


这篇主要介绍一下小程序图表组件chart.js的使用，项目中用到大神在github上分享的开源项目，这里给大家推荐和简单介绍下。具体的下载链接在下面：

https://github.com/xiaolin3303/wx-charts

导入

微信小程序有很简单的第三方导入机制，一般第三方函数都是写好后放在.js文件中的，小程序在具体的使用时将其.js文件导入就可以了。
下载完上述链接的.js文件后将其放在小程序工程中，这里为了便于管理我放在了使用图表功能的页面的文件夹下：微信小程序+Servlet后台开发（四）
之后在要使用到charts功能的.js文件中引用此第三方库：

var wxCharts = require('charts.js');
var voltageChart = new Array();
var currentChart = new Array();

voltageChart;currentChart;是将要用到的函数图片的句柄，在这里一起初始化了。如果将模块放在其他目录下要注意路径问题，推荐全部使用绝对路径，不过这样有改动时比较麻烦。这里我起的名字wxCharts即是第三方函数库的句柄，之后便可以引用其中的函数和数据等。

折线图

因为我的小程序只用到了折线图，所以这里只介绍一下折线图的用法，别的类型的图如柱状图等原理是一样的。

.wxml和.wxss

所有的第三方库实质上是二次开发，.charts.js也是一样。他的显示依赖于微信小程序的canvas组件，对组件有疑问的可以移步微信官方api：

https://developers.weixin.qq.com/miniprogram/dev/api/
首先在.wxml文件中放置canvas组件：

// device.wxml
<block wx:for="{{batteryList}}">
	<view class='batteryicon' bindtap='clickLine' data-id="{{index}}">
 		<canvas canvas-id="batteryCanvas{{index}}" disable-scroll="true" class="batterycanvas"></canvas>
	</view>
</block>

因为我用到了多个图表，所以这里用到了一个block模块。注意canvas模块中的属性canvas-id，对于画多个图表来说，这个属性是canvas组件和图表实例链接唯一的区分标识。
当然为了图表的美观，我们也可以对canvas模块加一些属性描述：

// device.wxss
.batterycanvas {
    width: 50%;
    height: 150rpx;  
}
.batteryicon {
  display: flex;
  justify-content: center;
}

这里写的比较简单，具体的描述大家可以自己更改。

图表初始化

图表初始化这一步我放在页面onLoad函数中进行实现，也就是默认在加载页面时加载图表。在只有一张图表插件时响应比较快，但是我的工程中一次性放了八张图表，所以图表的更新（页面的加载完全）比较慢，甚至远远超过8*一张图表的更新速度。这个问题究竟是因为我放的图表过多，还是.js文件中的其他组件占用的资源过多引起的，我到现在也没有搞明白。如果有大神了解这方面问题，还请不吝赐教。
言归正传，图表初始化直接调用charts.js文件的句柄既可以，也就是：

// device.js
for (var i = 0; i < 4; i++) {
	currentChart[i] = new wxCharts({
	  canvasId: 'currentCanvas' + i,
	  type: 'line',
	  categories: that.data.categories,
	  animation: true,
	  // background: '#f5f5f5',
	  series: [{
	    data: that.data.current[i],
	    format: function (val, name) {
	      return val.toFixed(2) + 'A';
	    }
	  }],
	  xAxis: {
	    disableGrid: true
	  },
	  yAxis: {
	    title: '历史电流（mA）',
	    format: function (val) {
	      return val.toFixed(2);
	    },
	    min: 0
	  },
	  width: windowWidth,
	  height: 200,
	  dataLabel: false,
	  dataPointShape: true,
	  extra: {
	    lineStyle: 'curve'
	  }
	});
}

初始化的许多参数含义其实还是很直白的：

属性名 含义和注意点
canvasId 图表实例链接的canvas组件
type 图表形式，折线图、饼状图等
categories 图表的横轴含义
animation 有无初始化动画
series 图表数据，data描绘具体数据，format描绘格式：整形等
xAxis/yAxis 图表网格是默认开启的，通过disableGrid属性关闭 ；title设置标题；min设置可以显示的最小值
width 图表宽度
height 图表高度
dataLabel 数据标签
dataPointShape 数据点显示与否
extra 其他一些设置，线型，线宽等等

new wxCharts()函数的返回值是创建的图表实例的唯一标识，以后在使用更新函数等方法时需要指定。前面也提到过我的小程序需要用到八个图表实例，这里先初始化四个。以上一些变量的初始化均略去，如果有想复现此demo的，可以跳到开头去我的github上下载。相关的wxml文件配置如下所示：

<view class='btnSet' >
  <button class='btn' bindtap='open' data-id="{{index}}">充电</button>
  <button class='btn' bindtap='stop' data-id="{{index}}" >暂停</button>
  <button class='btn' bindtap='close' data-id="{{index}}">放电</button>
</view>

<!-- <button bindtap='updateData'>更新</button> -->

<block wx:for="{{batteryList}}">
  <view  class="item">
    <view class='batteryicon' bindtap='clickLine' data-id="{{index}}">
      <canvas canvas-id="batteryCanvas{{index}}" disable-scroll="true" class="batterycanvas"></canvas>
    </view>
    <view style='display:flex;justify-content: center;flex-direction: column;'>
      <view style='display:flex;justify-content: center;flex-direction: row;'>
        <view>电压：{{item[0]}}mV</view>
        <view style='padding-left:20rpx'>电流：{{item[1]}}mA</view>
      </view>
      <view style='display:flex;justify-content: center;flex-direction: row;'>
        <view>温度：{{item[2]}}℃</view>
        <view style='padding-left:20rpx'>剩余电量：{{item[3]}}mAh</view>
      </view>
    </view>
    <view  class='contain' hidden='{{drawHidden[index]==1}}'>
      <text class='title'>电池{{index}}</text>
      <canvas canvas-id="voltageCanvas{{index}}" disable-scroll="true" class="canvas"></canvas>
      <canvas canvas-id="currentCanvas{{index}}" disable-scroll="true" class="canvas"></canvas>
    </view>
  </view>
</block>

最后得到的结果如下面所示：
微信小程序+Servlet后台开发（四）

数据更新

chart.js还提供了数据更新的方法，调用方法也简单：

updateData: function () {
    var that = this
    that.getTime()
    for(var i=0;i<4;i++){
      var series = [{
        name: '电压' + i,
        data: that.data.voltage[i],
        //data: [1, 1, 1, 1, 1, 1.5, 1.5, 1.5, 1.5, 1.5],
        format: function (val, name) {
          return val.toFixed(2) + 'mV';
        }
      }];
      voltageChart[i].updateData({
        categories: that.data.categories,
        series: series,
        //canvasId: 'voltageCanvas'+i,
      });
    }
    for (var i = 0; i < 4; i++) {
      var series = [{
        name: '电流' + i,
        data: that.data.current[i],
        // data: [1, 1, 1, 1, 1, 1.5, 1.5, 1.5, 1.5, 1.5],
        format: function (val, name) {
          return val.toFixed(2) + 'mA';
        }
      }];
      currentChart[i].updateData({
        categories: that.data.categories,
        series: series,
        //canvasId: 'currentCanvas' + i,
      });
    }
  },

主要用到的是updateData函数，可以设置的参数有如下几个：

属性名 含义
series 数据串
categories 横轴内容
title 标题
subtitle 副标题

更新数据时的动画和初始化设置时是一样的。

总结

我的工程主要用到的就是这几个功能，github会在几天内进行更新。大家也可以尝试别的功能，总之这是个很好的工具。

相关推荐