受欢迎的博客标签

wechat-微信小程序云开发实战记录(37)-小程序实现行情回放api+Signalr canvas,图表插件wxcharts

Published

微信小程序的画图组件生态介绍

微信小程序的画图可以分为两大类:

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

https://www.iaspnetcore.com/blog/blogpost/600bc990549db80efa50132c/aspnet-core-signalr5aspnet-core-20-webapisignalr-2

 

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

项目地址及下载: https://github.com/Shaman05/wxCharts