微信小程序的画图组件生态介绍
微信小程序的画图可以分为两大类:
1.第一类是微信官方的画布,名叫canvas,可以直接用来画图。
2.另外一大类是以canvas为基础进行扩展,丰富其功能有许多图表库,如:wxcharts、Echarts、Tau Charts、ChartJS
1.canvas 是微信官方的原生画布组件。
https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html
1.1微信小程序canvas画布自适应屏幕大小
https://blog.csdn.net/reoak/article/details/81201708
实现思路
Server
1.Create a Web API project
2.Web API project 集成(配置)SignalR,成为SignalR Server端,具备推送数据功能
3.Web API project SignalR Server端用定时器每隔3s向客户端发送股票成交明细数据
Client
4.微信小程序客户端集成miniProgramSignalr.js控件,成为SignalR Cilent 实时接收数据
5.微信小程序客户端SignalR Cilent 实时实时修改wxcharts画图控件底层数据
6.微信小程序客户端wxcharts画图控件根据数据变化实时画出行情成交图
1.Create a Web API project
1.简介
wxcharts是微信小程序图表插件之一,基于canvas绘制,体积小巧。
2.下载地址wxcharts.js
https://github.com/xiaolin3303/wx-charts/
3.引入wxchart.js
// miniprogram/pages/stock/pankou/index.js
var wxCharts = require('../../wxcharts/wxcharts.js');
Page({
pieChart = new wxCharts({
animation: true,
canvasId: 'pieCanvas',
type: 'pie',
series: [{
name: '成交量1',
data: 15,
}, {
name: '成交量2',
data: 35,
}, {
name: '成交量3',
data: 78,
}, {
name: '成交量4',
data: 63,
}, {
name: '成交量2',
data: 35,
}, {
name: '成交量3',
data: 78,
}, {
name: '成交量4',
data: 63,
}, {
name: '成交量2',
data: 35,
}, {
name: '成交量3',
data: 78,
}, {
name: '成交量3',
data: 78,
}],
width: windowWidth,
height: 300,
dataLabel: true,
});
<!--miniprogram/pages/stock/pankou/index.wxml-->
<text>miniprogram/pages/stock/pankou/index.wxml</text>
<view class="container">
<canvas canvas-id="pieCanvas" class="canvas" style="height:300px" bindtouchstart="touchHandler"></canvas>
</view>
3.微信小程序demo推荐:股票;动态分时图、K线图
http://www.wxapp-union.com/forum.php?mod=viewthread&tid=2428&fromuid=2