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

在微信小程序里插入折线图，可以使用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部分

四、结果

当数据较少时，canvas会全屏展示，不能滚动，当数据较多时，可以左右滚动。
不足之处：1、因为canvas的滚动是在滑动结束，获取到scrollLeft值之后的操作，所以滚动很生硬，不流畅；
2、不能使用wx-charts内置方法touchHandler。