微信小程序实现柱形图与折现图
1、组件导入
在miniprogram下的utils文件夹(若没有就新建一个)下,新建wxcharts.js
图表组件链接:wx-charts/wxcharts.js at master · xiaolin3303/wx-charts · GitHub
点进去,复制此js的全部内容,粘贴到wxcharts.js中。
一、柱状图
新建在pages下新建chart,包括chart.wxml,chart.wxss,chart.json,chart.js用于测试图表效果
1、chart.wxml
<canvas canvas-id="columnCanvas" disable-scroll="true" class="canvas"></canvas>
2、chart.wxss
.canvas {width: 750rpx;height: 500rpx;
}
3、chart.js
// pages/chart/chart.js
var wxCharts = require("../../utils/wxcharts.js");//相对路径
Page({/*** 页面的初始数据*/data: {imageWidth:0},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {new wxCharts({canvasId: 'columnCanvas',type: 'column',categories: ['2012', '2013', '2014', '2015', '2016', '2017'],series: [{name: '成交量1',data: [15, 20, 45, 37, 4, 80]}],yAxis: {format: function (val) {return val + '万';},/*max:400,min:0*/},width: 320,height: 200});},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})
4、接下来看看效果
5、若像取消柱状图每条顶部的数字显示,在wxcharts.js中修改,将这行注释掉即可
修改后,柱状图不再显示数值
二、折线图
1、chart.wxml
<canvas style="width: 400px; height: 500px;" canvas-id="yueEle" binderror="canvasIdErrorCallback"></canvas>
2、chart.js
var wxCharts = require("../../utils/wxcharts.js");
var yuelineChart=null;
Page({data:{imageWidth:0},onLoad:function(){},onShow:function(){var windowWidth = 320;try {var res = wx.getSystemInfoSync();windowWidth = res.windowWidth;} catch (e) {console.error('getSystemInfoSync failed!');}yuelineChart = new wxCharts({ //当月用电折线图配置canvasId: 'yueEle',type: 'line',categories: ['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', '31'], //categories X轴animation: true,series: [{name: 'A',data: [1, 6, 9, 1, 0, 2, 9, 2, 8, 6, 0, 9, 8, 0, 3, 7, 3, 9, 3, 8, 9, 5, 4, 1, 5, 8, 2, 4, 9, 8, 7],format: function (val, name) {return val + '';}}, {name: 'B',data: [0, 6, 2, 2, 7, 6, 2, 5, 8, 1, 8, 4, 0, 9, 7, 2, 5, 2, 8, 2, 5, 2, 9, 4, 4, 9, 8, 5, 5, 5, 6],format: function (val, name) {return val + '';}},],xAxis: {disableGrid: true},yAxis: {title: '数值',format: function (val) {return val;},/*max: 20,*/min: 0},width: windowWidth,height: 200,dataLabel: false,dataPointShape: true,extra: {lineStyle: 'curve'}});}
})
3、效果
4、不设置min和max时,默认y轴最小值为数据最小值,y轴最大值为数据最大值。有时,数据的变动幅度过大会显得不美观,就像上图。那么我们可以修改y轴的min和max值。将chart.js中y轴的max改为20,min改为-5后,图表更加美观。
微信小程序实现柱形图与折现图相关推荐
- 微信小程序:wx-charts动态绘制折线图
微信小程序:wx-charts动态绘制折线图 wx-charts是基于 Canvas的微信小程序主流图表工具,体积小易操作,支持多种图表的绘制,这里主要就动态绘制折线图做出详解,所谓动态,指的是表格的 ...
- 微信小程序最简单的轮播图
小程序轮播图 今天给大家分享一个在微信开发者工具开发微信小程序的简单案例--轮播图(只用wxml和wxss) 话不多说,直接上代码!!! 效果图 WXML代码 基本属性介绍 <!-- indic ...
- 微信小程序使用swiper制作轮播图留白的解决方法
微信小程序相比网页制作轮播图快捷了很多,直接可以使用swiper标签,但是对于新手来说,也有很多不可避免的坑. 附上轮播图代码 <view class="swp">&l ...
- 微信小程序:装B神器P图修改微信流量主小程序源码下载趣味恶搞图制作免服务器域名
今天给大家带来的这一款小程序是装逼生成,趣味制图工具 该小程序免服务器和域名,低成本运营 内容丰富,搭建简单,而且更逼真哟 内涵N种模板制作,另外还可以设置推荐小程序更好的互引 简单说几个模板吧 红包 ...
- 微信小程序利用canvas实现六边形蜘蛛图
微信小程序利用canvas实现六边形蜘蛛图 发布时间:2018-01-24 14:30:29 1..wxml <canvas style="width: 200px; height: ...
- 微信小程序设置 本地图片为背景图
微信小程序 通过wxss进行设置 背景图报错 经查询,发现微信小程序中,将网络图片或base64图片设置为背景图片可正常显示,将本地图片设置为背景图片则不能显示,解决方法有三种,个人采用的是第三种方法 ...
- php 小程序轮播图,微信小程序swiper组件构建轮播图代码分享
本文主要和大家介绍微信小程序 swiper组件构建轮播图的实例的相关资料,如有疑问请留言或者到本站社区交流讨论,需要的朋友可以参考下,希望能帮助到大家. 微信小程序 swiper组件构建轮播图的实例 ...
- 【微信小程序】实现简单轮播图效果
微信小程序实现轮播图效果 轮播图实现效果:(可循环播放) 代码实现:(复制可用) index.wxml: <view class="swiper"><swiper ...
- 自从自己搭建了这套精选壁纸聊天背景的微信小程序,我的手机背景图再都没重复过
前不久刚学习完如何使用hbuilder还有微信开发者工具的简单应用,借着对拥有自己搭台出来的小程序的渴望,在网上物色了很久,终于找到一套比较好用切可用的手机壁纸小程序. 先看看运行起来的样子吧 运行D ...
最新文章
- (14)某工业生产部门根据国家计划的安排, 拟将某种高效率的5台机器,分配给所属的3个工厂A,B,C,各工厂在获得这种机器后,可以为国家盈利的情况如表4-10所示。
- 百度程序员抱怨:告诉下家去哪里,才给批准离职!
- ftp 的三种数据传输模式
- 成功解决pyinstaller打包scipy是报模块dll缺失和failed to import any qt binding的问题
- JavaScript实现prim普里姆算法(附完整源码)
- Asp.net Ajax AutoComplete 控件的用法
- 程序员基本功08异常捕捉的陷阱
- 前端学习(1523):vue-cli项目目录介绍
- 【Siddhi】DefinitionNotExistException: Stream with stream ID xxx has not been defined
- 白帽SQL注入实战过程记录(2)——根据information_schema组装SQL注入语句
- linux 7安装mysql8.12_Linux(centOS 7)安装MySQL8.12
- Spark 基础 —— class与object,面向对象、类与伴生对象(companion object)
- 转:java 全角半角转换函数
- 无继承情况下的对象构造
- 谁说中国没有林纳斯,中国初代IT宗师的封神榜
- nginx工作原理与配置
- 感性电路电流计算_220和380V功率和电流计算知识。
- IOS逆向-动态调试
- 聊下git merge --squash
- 如何隐藏table 中的指定列?