ucharts 设置X轴滚动不生效

前端新手的个人笔记———————————————————————————————— 

<view>
	<canvas canvas-id="stys" id="stys" class="charts" :ontouch="true"/>
</view>

看了很多都说添加:ontouch="true"就行,但还是还是不能滚动,后来花了一块钱,看了官方文档。

解决了

源代码:

<view>
		<canvas canvas-id="stys" id="stys" class="charts" :ontouch="true" @touchstart="touchstart"@touchmove="touchmove" @touchend="touchend" />
</view>

methods: {
			touchstart(e) {
				uChartsInstance[e.target.id].scrollStart(e);
			},
			touchmove(e) {
				uChartsInstance[e.target.id].scroll(e);
			},
			touchend(e) {
				uChartsInstance[e.target.id].scrollEnd(e);
				uChartsInstance[e.target.id].touchLegend(e);
				uChartsInstance[e.target.id].showToolTip(e);
			},
}


drawCharts1(id, data) {
				const ctx = uni.createCanvasContext(id, this);
				uChartsInstance[id] = new uCharts({
					type: "line",
					context: ctx,
					width: 750 / 880 * uni.getSystemInfoSync().windowWidth,
					height: 500 / 800 * uni.getSystemInfoSync().windowWidth,
					categories: data.categories,
					series: data.series,
					animation: true,
					background: "#FFFFFF",
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					enableScroll: true,
					scrollAlign: 'left',
					touchMoveLimit: 24,
					legend: {},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 7,
						scrollColor: "#A6A6A6", //默认为 #A6A6A6
						scrollBackgroundColor: "#EFEBEF", //默认为 #EFEBEF
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow"
						}
					}
				});
			},

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值