微信小程序基于wx-charts的canvas组件横向滚动

最新推荐文章于 2023-11-17 10:00:36 发布
最新推荐文章于 2023-11-17 10:00:36 发布
阅读量1.2k 收藏 5
点赞数
分类专栏： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zaoqinghuan/article/details/115794151
版权
本文介绍如何在微信小程序中利用wx-charts绘制折线图，并解决因数据过多导致的x轴挤压问题。通过监听scroll事件，动态调整canvas内容实现横向滚动。在数据较少时全屏展示，数据多时可左右滚动，但存在滚动不流畅和无法使用wx-charts内置触摸处理的不足。
摘要由CSDN通过智能技术生成

在微信小程序里插入折线图，可以使用wx-charts，在绘制到canvas上。
wx-charts具体用法就不介绍了。折线图显示后，却发现了一个问题：数据x轴长度不确定，导致如果数据很长的话，数据就会挤在一起，如果长度较大，canvas能滚动就好了。
在网页中，我们直接设置父元素固定宽度，子元素宽度超过父元素，让父元素overflow：auto;就行了，可是对微信小程序的canvas组件不起作用。
第一时间想到scroll-view组件，但是scroll-view组件不能作为canvas的父元素。但是
研究发现，虽然canvas不会响应scroll-view的滚动，但是bindscroll事件方法是有返回值的，e.detail里有个scrollLeft参数，是随滚动不断变化的，
一、wxml部分
在这里插入图片描述
二、css部分
在这里插入图片描述
三、js部分
在这里插入图片描述

在这里插入图片描述

最低0.47元/天 解锁文章
前端对象
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
wx-charts图表滑动功能
沫沫酱
12-12 4161
插件下载地址已经api文档 https://github.com/xiaolin3303/wx-charts 要实现滑动页面部分需要绑定这三个事件bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend" <canvas canvas-id='areacanvas' class='canva...
微信小程序canvas组件横向溢出滚动（基于wx-charts）
风雪夜过客的博客
04-27 7386
公司要求在微信小程序里插入折线图，上网搜了下，发现wx-charts还挺好用的，就用他了。 wx-charts具体用法就不介绍了，网上有很多教程，还有不懂的可以留言讨论。折线图完成了，却发现了一个问题：展示数据长度不确定，导致如果数据很长的话，数据就会挤成一团，很不好看，如果长度较大，canvas能滚动就好了。 动态设置canvas宽度不难：获取数据长度，让canvas长度为数据长度乘以固定值...
微信小程序绘制条形图
qq_36335657的博客
06-25 1667
目录 需求 实现过程 wxml布局 JS实现 最终效果 需求 在用户查看自己发布的问卷时，我们希望可以查看到每个选项被选择的次数。 但是这样的界面不够直观，为了让用户快速了解各个选项的被选情况，我们希望绘制条形图，使得查看效果更加直观。 实现过程 wxml布局 <block wx:if="{{style=='tiaoxing'}}"> <canvas style...
demo：微信小程序wxchart柱状图
YiMiMMMi的博客
09-17 4145
wxchart是轻便型适合小程序里面的图表插件 wxml: /canvas-id名称和js使用的是同一个名称/ <canvas canvas-id="columnCanvas" disable-scroll="true" class="canvas"></canvas> wxss: .canvas { width: 100%; margin: 0 a...
微信小程序研发问题梳理:翻页:下拉:缓存:canvas:富文本:分享
dmtnewtons的专栏
11-30 724
微信小程序研发问题梳理 最近鼓捣小程序的时候，着实遇到了一些问题，尽管有些再翻看文档几遍，就能找到答案，但还是要发挥下烂笔头的功效，顺便梳理下。 问题列表 登录流程 小程序标签页地址无法跳转问题 页面翻页内容加载问题 页面下拉无法触发的问题 小程序本地缓存的使用 Canvas制图横向滚动 富文本内容无法解析 小程序分享功能 1.登录流程 通过小程序登录时获取的 code 和...
基于wxcharts.js 实现扩展line图可拖动状态下，x轴可伸缩控制
08-24
基于wx-charts 扩展功能 x轴可伸缩控制。实现了在line图可拖动情况下，x轴可伸缩控制
微信小程序的wx-charts插件-tab选项卡
03-29
微信小程序的wx-charts插件-tab选项卡 效果: (此图片来源于网络，如有侵权，请联系删除! ) //index.js var wxCharts = require('../../utils/wxcharts-min.js'); const app = getApp(); var ringChart = null; Page...
微信小程序图表组件 wx-charts-master
12-23
微信小程序图表组件wx-charts-master是一款专为微信小程序设计的高效、灵活的图表库，它基于JavaScript编写，能够帮助开发者轻松地在小程序中创建各种数据可视化图表。这个组件的出现，使得微信小程序开发者无需深入...
微信小程序图表插件wx-charts用法实例详解
10-16
主要介绍了微信小程序图表插件wx-charts用法,结合实例形式较为详细的总结分析了微信小程序图表插件wx-charts的功能、常见用法及相关操作注意事项,需要的朋友可以参考下
微信小程序-图表charts组件
06-12
在微信小程序中，charts组件通常由第三方库提供，例如ECharts-for-WeChat或wx-charts，它们提供了丰富的图表类型和自定义选项，帮助开发者实现数据可视化。 要使用charts组件，首先需要引入相关的库。这通常涉及到...
微信小程序图表插件（wx-charts）:饼图、线图、柱状图、区域图 ...
03-29
wx-charts基于canvas绘制的微信小程序图表插件 支持图表类型 饼图 pie  *线图 line  *柱状图 column  *区域图 area 高清显示 设置canvas的尺寸为2倍大小，然后缩小到50%，建议都进行这样的设置，图表本身绘制时是...
关于小程序中wx.chart曲线图无法滑动和最高层级的问题
wuli_yc的博客
07-18 1025
关于wx.chart曲线我踩的坑 第一次用wx.chart这个插件就遇到了好多的坑，比如在开发工具的测试的时候曲线图是可以滑动的，但是在正式版中用手机就无法滑动曲线，滑动就会报错，然后就是曲线的层级特别的高，如果曲线上方有固定定位的元素的话就曲线图滑动到固定定位的元素位置时，曲线图就会出现在该元素的上方。 解决方法 曲线图无法滑动的问题 由于微信小程序中，echarts的层级最高，无论设置多大层...
小程序进度条_小程序杂技谈之横向双色进度条
weixin_39895881的博客
12-18 282
万圣节狂欢横向双色进度条先看效果图小程序自带的进度条不能满足我们想要的效果，所以这里我们决定用view叠加的方式进行动画增长和展示编写布局style="margin-bottom:{{index==arrProgress.length-1?46:0}}rpx;">{{item.name}}=100}}">定义样式page{...
解决ios13版本echarts的tooltip在页面滚动时出现白色线条问题
sunshineboysy的博客
08-11 735
在做开发过程中，发现在ios手机上滑动时，echarts的tooltip会放置在柱子的下层并出现白条，刚开始以为是层级问题，通过给tooltip添加层级进行解决，发现设置层级并不能解决该问题，最后查看api发现可通过设置属性进行实现，解决方案如下： 设置tooltip的position，即重置tooltip的位置进行显示，即可解决。 position: function (point, params, dom, rect, size) { dom.style.transform = "transla
wx-charts 折线图表使用笔记
weixin_44486632的博客
05-26 630
微信小程序中需要使用图表来显示数据走势 中间使用过长中遇到一些问题，在此记录一下 首先从gethub上或者从码云上下载wx-charts.js 参数说明 参数说明-wxCharts文档 方法&事件 方法&事件
Echarts 图表添加横向 竖向滚动条
m0_65607651的博客
11-13 518
Echarts 图表添加横向 竖向滚动条
Vue2+echarts横向进度条类型颜色渐变柱形图
最新发布
qq_56556465的博客
11-17 1123
其实这点不难，x与y轴数据互换一下就可以了。分析完需求，代码如下，每一行都做了注释。3.柱形图两边文字在柱子上方。2.背景有个黑色的总进度条。
小程序 wxchart 使用简单入门
LlanyW的专栏
07-13 3105
opts.extra.pie.offsetAngleNumber, 默认为0, 起始角度偏移度数，顺时针方向，起点为3点钟位置（比如要设置起点为12点钟位置，即逆时针偏移90度，传入-90即可）opts.extra.radar.labelColorString, 默认为#666666, 各项标识文案的颜色。opts.extra.radar.gridColorString, 默认为#cccccc, 雷达图网格颜色。
微信小程序 柱状图的使用
xiao_xu_aaa的博客
12-24 1471
微信小程序 柱状图的使用
小程序wx-charts官方文档
07-09
### 回答1： wx-charts是一款基于小程序开发的图表插件，它提供了丰富的图表样式和丰富的交互功能。通过阅读官方文档，我们可以深入了解这个插件的使用方法和相关API。 文档的结构清晰，以快速入门、基本配置、图表类型、图表属性、事件和回调等部分来组织内容。在快速入门部分，它提供了安装和使用wx-charts的基本步骤，方便开发者快速上手。 在基本配置部分，文档介绍了如何对图表进行基本配置，如设置图表的大小、颜色、背景等属性。它还介绍了如何使用数据来渲染图表，并通过示例代码展示了不同类型的图表的使用方法。 在图表类型部分，文档列举了各种图表类型，如折线图、柱状图、饼图等，每种图表类型都有详细的说明和示例代码，帮助开发者了解每种图表的特点和用途。 在图表属性部分，文档介绍了图表的各种属性和方法，如是否显示图例、是否显示标签、是否显示数值等。它还提供了一些常用的属性配置示例，帮助开发者根据自己的需求进行图表样式的定制。 此外，文档还介绍了图表的事件和回调函数，包括图表的点击事件、触摸事件等，开发者可以根据这些事件来实现一些交互功能，如点击图表某个数据点显示详细信息等。 总的来说，wx-charts官方文档提供了详细的使用方法和API说明，帮助开发者快速了解和使用这个图表插件。它的示例代码丰富，结构清晰，适合开发者学习和参考。通过阅读官方文档，开发者可以轻松使用wx-charts插件开发出各种图表功能丰富的小程序。 ### 回答2： 小程序wx-charts官方文档是一个指南，用于帮助开发人员了解如何在微信小程序中使用wx-charts这个图表库。该文档提供了详细的使用说明和示例代码，帮助开发人员快速上手。 文档首先介绍了wx-charts的基本概念和特点，包括它提供的各种图表类型和功能。然后，文档详细说明了如何引入wx-charts库以及相关的依赖项。开发人员可以按照文档中提供的步骤，下载安装wx-charts，并在小程序中进行配置。 随后，文档逐一介绍了每种图表类型的使用方法，包括折线图、柱状图、饼图等。每个图表类型都有相应的代码示例和参数说明，开发人员可以根据自己的需求进行定制。文档还提供了一些常见问题和解决方案，以帮助开发人员在使用过程中遇到困难时进行排查和解决。 此外，官方文档还介绍了一些高级功能和扩展，例如如何处理图表的交互事件以及如何自定义样式和主题。这些功能可以帮助开发人员根据自己的需求和设计要求，进一步优化和定制图表。 总而言之，小程序wx-charts官方文档提供了全面而详细的说明，帮助开发人员轻松上手并灵活使用这个图表库。它是一个宝贵的参考资源，为开发人员提供了极大的便利和效率。 ### 回答3： wx-charts是一款基于微信小程序平台的图表插件，它提供了丰富多样的图表类型和可定制的选项，使得开发者可以方便地在小程序中创建各种图表展示。 wx-charts官方文档详细介绍了插件的安装和使用方法。文档中首先介绍了如何通过npm安装wx-charts，并在小程序的app.json文件中进行配置。接着，文档详细介绍了插件提供的各种图表类型，包括折线图、柱状图、饼图、雷达图等等，并提供了每种图表类型的使用示例和参数说明。 在文档的使用教程部分，官方提供了一步一步的操作指引，帮助开发者快速上手。例如，文档详细介绍了如何创建一个折线图，包括如何引入wx-charts插件、在页面wxml中添加图表的Canvas容器、在页面js文件中初始化图表实例和设置图表的数据和样式等等。这些教程都以简洁明了的代码示例作为辅助，让开发者能够更好地理解和学习。 此外，官方文档还介绍了wx-charts插件的一些高级用法和特性，例如如何通过修改源码来自定义图表的样式、如何在图表中添加动画效果等等。这些高级用法可以帮助开发者更加灵活和自由地使用插件，满足不同的需求。 总的来说，wx-charts官方文档提供了全面、详细的插件介绍和使用指南，对于想要在微信小程序中使用图表展示的开发者来说，是一个非常有价值的参考资料。无论是初学者还是有一定经验的开发者，都可以通过阅读官方文档来学习和掌握wx-charts插件的使用方法和技巧。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值