>[danger] ## 各位遇到问题请先参考以下问题,如果仍不能解决,请到[uni-app插件市场](http://ext.dcloud.net.cn/plugin?id=271),或者加入QQ交流群:371774600探讨。 >[danger] ## **图表尺寸与预期不符合,请检查css样式与cWidth和cHeight的值是否相等** >[danger] ## **如开启滚动条或者使用ToolTip事件不起作用,请检查canvas标签是否绑定了touch事件** >[danger] ## **比较明显的bug是不会有的,遇到问题请先对照demo查摆自己的代码** > ## **通用问题** * 如果用在您的项目上图表不显示,请先运行demo页面,如果demo页面也无法显示,请查看全局样式是否定义了**canvas的样式**,如有请取消。 * 如果实例化图表后,发现图表位置不正确,**请检查css样式以及cWidth和cHeight的值是否相等**,很多朋友修改画布大小时,忽略的这个问题,导致图表显示不完整。 * 图表**背景颜色**问题,很多朋友设置图表背景颜色时候,只修改了view和canvas的css,忘记了修改实例化参数中的`background:'#FFFFFF'`,导致图表画板右侧有一道白条(这个是图表配置中的右边距),所以特修改了demo中的柱状图的背景颜色供大家参考。 * 如果将canvas放在多级<view>组件下,遇到ToolTip不显示或点击区域不正确,请在`touch`事件中增加以下代码解决。 ```javascript //#ifdef MP-ALIPAY e.mp.currentTarget.offsetTop+=uni.upx2px(510); //#endif ``` >[warning] `uni.upx2px(510);`是canvas组件的上级<view>组件的高度 ## **支付宝问题** 兼容支付宝小程序写法,请在模板中使用条件编译,请参考如下代码 ``` <!--#ifdef MP-ALIPAY --> <canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas> <!--#endif--> <!--#ifndef MP-ALIPAY --> <canvas canvas-id="canvasColumn" id="canvasColumn" class="charts""></canvas> <!--#endif--> ``` * 在高分屏模式下,如果发现图表已显示,但位置不正确,请检查上级`view`容器的`样式`,为了解决高分屏canvas模糊问题,使用了css的`transform`,所以请修改上级样式使canvas容器缩放至相应位置。 >[danger] # 支付宝小程序IDE中不显示,但运行到真机是可以显示的,请真机测试。 ## **组件问题** * 很多小伙伴们自行把本插件做成组件来调用,做成组件需要注意,如果涉及到v-if切换显示图表组件,第二次可能会变空白,这里有两个建议: 1、建议用v-show替代v-if切换显示图表组件。 2、建议参考demo组件引用方法,在demo的基础上改造您的专有组件。