wx-charts图表滑动功能

￡神魔★判官ぃ 2022-04-05 11:12 436阅读 0赞

插件下载地址已经api文档

[https://github.com/xiaolin3303/wx-charts][https_github.com_xiaolin3303_wx-charts]

要实现滑动页面部分需要绑定这三个事件bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend"

<canvas canvas-id='areacanvas' class='canvas' bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend"></canvas>

第一步引入插件：

var wxCharts = require('../../utils/wxcharts.js');

var mychart;

第二步配置参数以及增加三个绑定事件

canvas:function()\{

var that = this;

console.info("\*\*\*\*" + that.data.categories + "\*\*\*\*\*\*\*" + that.data.series + "\*\*\*\*\*\*");

mychart = new wxCharts(\{

canvasId: 'areacanvas',

type: 'line',

categories: that.data.categories,

xAxis: \{

disableGrid: true

\},

enableScroll:true,//配置该折线图可滑动

series: that.data.series,

width: windowWidth,

height: 200,

databel: false,

dataPointShape: true,

extra: \{

lineStyle: 'curve'

\}

\})

\},

touchstart:function(e)\{

//console.info(e);

mychart.scrollStart(e);//开始滚动

\},

touchmove:function(e)\{

//console.info(e);

mychart.scroll(e);

\},

touchend:function(e)\{

//console.info(e);

mychart.scrollEnd(e);

\},

[https_github.com_xiaolin3303_wx-charts]: https://github.com/xiaolin3303/wx-charts

发表评论取消回复

表情：

评论列表（有 0 条评论，436人围观）

还没有评论，来说两句吧...

相关阅读

相关如何给echarts图表添加下载图表成图片的功能

如何给echarts图表添加下载图表成图片的功能 1、先打开一个现成的图表效果图，注意图中圈出的地方，如图 ![在这里插入图片描述][watermark_type_Zm

╰+攻爆jí腚メ/ 2022年12月23日 15:29/ 1 赞/ 217 阅读

相关 vue实现图片滑动验证功能——功能实现

图片滑动验证，是目前比较常见的验证方式，主要目的是防止用户利用机器人自动注册、登录、灌水。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5n

今天药忘吃喽~/ 2022年08月31日 15:12/ 0 赞/ 479 阅读

相关 android Viewpager禁用/开启滑动切换功能

要实现viewpager的滑动以及禁止滑动切换功能只需要继承viewpager，在onTouchEvent进行逻辑判断即可（网上搜到的，确实可行，原创地址不明），下面自己实现一

逃离我推掉我的手/ 2022年08月14日 03:53/ 0 赞/ 421 阅读

相关滑动屏幕旋转模型功能实现

两种方法可以实现单指滑动屏幕旋转模型~请听我细细道来~哈哈![大笑][laugh.gif] 方法一： 1.0 首先添加一个模型。 1.1 给任何ui

刺骨的言语ヽ痛彻心扉/ 2022年06月16日 02:30/ 0 赞/ 160 阅读

相关 springmvc使用echarts生成图表展示功能

编辑工具：Eclipse 项目：ssm(spring+springmvc+mybatis) 报表展示：使用echarts框架：效果展示： ![70][] 根据月报表数

谁借莪１个温暖的怀抱￠/ 2022年05月15日 10:54/ 0 赞/ 240 阅读

相关 wx-charts图表滑动功能

插件下载地址已经api文档 [https://github.com/xiaolin3303/wx-charts][https_github.com_xiaolin3303_w

￡神魔★判官ぃ/ 2022年04月05日 11:12/ 0 赞/ 437 阅读

相关 RecyclerView滑动删除和拖拽功能实现

[源码传送门][Link 1] 前言从Android 5.0开始，谷歌推出了新的控件RecyclerView，相对于早它之前的ListView，优点多多，功能强大

谁借莪１个温暖的怀抱￠/ 2022年03月16日 02:36/ 0 赞/ 252 阅读

相关 Android 禁止Viewpager左右滑动功能

做项目要求某种情况下ViewPager不能滑动百度后发现重写ViewPager，覆盖ViewPager的onInterceptTouchEvent(MotionEvent

た入场券/ 2021年12月23日 06:49/ 0 赞/ 365 阅读

相关基于wxcharts绘制报表

前言微信小程序图表插件（wx-charts）是基于canvas绘制，体积小巧，支持图表类型饼图、线图、柱状图、区域图等图表图形绘制，目前wx-charts是微信小程序图表

深碍√TFBOYSˉ_/ 2021年11月16日 17:20/ 0 赞/ 322 阅读

相关 uniapp 滑动删除功能实现（右侧滑动展示菜单功能）

列表滑动删除功能 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ib

桃扇骨/ 2021年07月25日 22:19/ 0 赞/ 2003 阅读