用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
  • TA的每日心情
    无聊
    2017-8-15 16:38
  • 签到天数: 42 天

    [LV.5]常住居民I

    852

    主题

    2039

    帖子

    3万

    金钱

    管理员

    论坛管理员

    Rank: 9Rank: 9Rank: 9

    积分
    0

    突出贡献优秀版主荣誉管理论坛元老

    QQ
    2017-4-5 13:24:14 zhichi_admin 管理员 楼主 517318
    最近图表工具,一个比一个6,这个目前最6666666

    微信小程序图表工具,charts for WeChat small app

    基于canvas绘制,体积小巧

    持续优化更新中,请保持关注~

    支持图表类型

    • 饼图 pie
    • 圆环图 ring
    • 线图 line
    • 柱状图 column
    • 区域图 area

    代码分析 Here

    如何使用

    1、直接引用编译好的文件 dist/charts.js

    2、自行编译

    [AppleScript] 纯文本查看 复制代码
    git clone github.com/xiaolin3303/wx-charts.git
    npm install rollup -g
    npm install
    rollup -c 或者 rollup --config rollup.config.prod.js


    参数说明

    opts Object

    opts.canvasId String required 微信小程序canvas-id

    opts.width Number required canvas宽度,单位为px

    opts.height Number required canvas高度,单位为px

    opts.animation Boolean default true 是否动画展示

    opts.type String required 图表类型,可选值为pie, line, column, area, ring

    opts.categories Array required (饼图不需要) 数据类别分类

    opts.dataLabel Boolean default true 是否在图表中显示数据内容值

    opts.yAxis Object Y轴配置

    opts.yAxis.format Function 自定义Y轴文案显示

    opts.yAxis.min Number Y轴起始值

    opts.yAxis.title String Y轴title

    opts.series Array required 数据列表

    数据列表每项结构定义

    dataItem Object

    dataItem.data Array required (饼图为Number) 数据

    dataItem.color String 例如#7cb5ec 不传入则使用系统默认配色方案

    dataItem.name String 数据名称

    dateItem.format Function 自定义显示数据内容


    Example pie chart

    [AppleScript] 纯文本查看 复制代码
    var Charts = require('charts.js');
    new Charts({
        canvasId: 'pieCanvas',
        type: 'pie',
        series: [{
            name: '成交量1',
            data: 15,
        }, {
            name: '成交量2',
            data: 35,
        }, {
            name: '成交量3',
            data: 78,
        }, {
            name: '成交量4',
            data: 63,
        }],
        width: 320,
        height: 200,
        dataLabel: false
    });


    ring chart


    [AppleScript] 纯文本查看 复制代码
    new Charts({
        canvasId: 'pieCanvas',
        type: 'ring',
        series: [{
            name: '成交量1',
            data: 15,
        }, {
            name: '成交量2',
            data: 35,
        }, {
            name: '成交量3',
            data: 78,
        }, {
            name: '成交量4',
            data: 63,
        }],
        width: 320,
        height: 200,
        dataLabel: false
    });






    line chart

    [AppleScript] 纯文本查看 复制代码
    new Charts({
        canvasId: 'lineCanvas',
        type: 'line',
        categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
        series: [{
            name: '成交量1',
            data: [0.15, 0.2, 0.45, 0.37, 0.4, 0.8],
            format: function (val) {
                return val.toFixed(2) + '万';
            }
        }, {
            name: '成交量2',
            data: [0.30, 0.37, 0.65, 0.78, 0.69, 0.94],
            format: function (val) {
                return val.toFixed(2) + '万';
            }
        }],
        yAxis: {
            title: '成交金额 (万元)',
            format: function (val) {
                return val.toFixed(2);
            },
            min: 0
        },
        width: 320,
        height: 200
    });



    columnChart

    [AppleScript] 纯文本查看 复制代码
    new Charts({
        canvasId: 'columnCanvas',
        type: 'column',
        categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
        series: [{
            name: '成交量1',
            data: [15, 20, 45, 37, 4, 80]
        }, {
            name: '成交量2',
            data: [70, 40, 65, 100, 34, 18]
        }],
        yAxis: {
            format: function (val) {
                return val + '万';
            }
        },
        width: 320,
        height: 200
    });


    areaChart

    [AppleScript] 纯文本查看 复制代码
    new Charts({
        canvasId: 'areaCanvas',
        type: 'area',
        categories: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017'],
        series: [{
            name: '成交量1',
            data: [70, 40, 65, 100, 34, 18],
            format: function (val) {
                return val.toFixed(2) + '万';
            }
        }, {
            name: '成交量2',
            data: [15, 20, 45, 37, 4, 80],
            format: function (val) {
                return val.toFixed(2) + '万';
            }
        }],
        yAxis: {
            format: function (val) {
                return val + '万';
            }
        },
        width: 320,
        height: 200
    });



    回复即下载项目附件:

    游客,如果您要查看本帖隐藏内容请回复




    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    使用道具 举报 回复
    啥也不说了,感谢楼主分享哇!
    啥也不说了,感谢楼主分享哇!
    啥也不说了,感谢楼主分享哇!
    啥也不说了,感谢楼主分享哇!
    谢谢分享啊
    2017-5-4 16:24:19 阳光150 来自手机 新人求带
    7#
    啥也不说了,感谢楼主分享哇!
    来自: 微社区
    啥也不说了,感谢楼主分享哇!



    啥也不说了,感谢楼主分享哇!
    发新帖
    *滑动验证:
    您需要登录后才可以回帖 登录 | 立即注册
    咫尺论坛|小程序开发社区
    X