基于微信小程序canvas的图表控件,适用于wepy框架
Switch branches/tags
Nothing to show
Clone or download
Latest commit 06f5a51 May 17, 2018
Permalink
Failed to load latest commit information.
example 信息修改 Jan 20, 2017
src active bug Jan 23, 2017
.babelrc init Jan 19, 2017
.gitignore 加强demo Jan 20, 2017
.npmignore 优化细节 Jan 22, 2017
CHANGELOG.md 信息修改 Jan 20, 2017
README.md Update README.md May 17, 2018
package.json active bug Jan 23, 2017

README.md

微信小程序 wepyjs 图表控件 wepy-com-charts

已停止维护,请谨慎使用!!

说明

基于微信小程序canvas开发的图表控件,适用于wepy框架

暂时只有折线图,后续提供更多的图表

使用

安装组件

npm install wepy-com-charts --save

引用组件

<template>
    <lineChart></lineChart>
</template>
<script>
    import wepy from 'wepy';
    import Charts from 'wepy-com-charts';

    export default class Index extends wepy.page {
        components = {
            lineChart: Charts
        };
    }
</script>

调用方法

//调用draw方法可以产出图像
this.$invoke('lineChart', 'draw');

Props传值说明

属性 默认值 类型 必填 说明
collection [] array 图表数据,格式如下:[ {name:'line name',data:[{key:'对应label的值',value:10}]} ]
labels [] array x轴分布的label
colors ['#FF5974'...] array 数据线颜色
paddingX 18 number x轴内边距
paddingY 15 number y轴内边距
height 215 number 图表的高度
width device width number 图表的宽度,默认取设备的宽度
lineWidth 2 number 数据线的大小
axesColor #F5F5F5 color 坐标颜色
xLabelColor #111111 color x轴label的颜色
yLabelColor #111111 color y轴label的颜色
onXLabelFilter null function/'enable' x轴label过滤回调函数,设置为enable时全部x轴label显示
onYLabelFilter null function/'enable' y轴label过滤回调函数,设置为enable时全部y轴label显示
yLabelFormat null function y轴label显示格式回调函数
yLabelRows 5 number y轴label显示个数
onXAxesFilter null function/'enable' x轴背景坐标过滤回调函数,设置为enable全部显示
onYAxesFilter null function/'enable' y轴背景坐标过滤回调函数,设置为enable全部显示
showFollowXAxes false boolean x轴跟随坐标是否显示
showFollowYAxes false boolean y轴跟随坐标是否显示
onActived null function 手指选中某一列时触发的回调函数,可以获取该列所有点的数据
positionX 0 number 画板x轴位置,用于手指拖到计算
positionY 0 number 画板y轴位置,用于手指拖到计算
showDetailPanel true boolean 是否显示详细面板