定制开发

如果拖拽面板不能满足需求,可以使用定制开发。具体步骤如下:

获取数据源 ID

按住 ctrlcmd,再点击数据源列表,即可弹出数据源描述窗口。

示例数据下载:某超市办公用品发货记录.xlsx

填写文件配置文件

打开 /customs/configs.json,填写配置文件:

{
    "boards": [{
        "name": "连锁超市办公用品发货记录",  // 页面 title
        "auth": "protect",  // 访问权限,可以是 `public` 或 `protect`
        "token": "123456",  // 当 auth 为 protect 时,页面需要访问密码,例如 `https://lynctone.com/demo?token=123456`
        "table": "58d36657bef0d5d791e914ae",  // 之前复制的数据源 ID( 如需多数据源,可以填写数组形式 )
        "renderer": "demo"  // 页面名称,同时也是访问路径
    }]
}

自定义开发页面

页面路径 /customs/views/demo.hbs

<!DOCTYPE html>
<html>
<head>
    {{> custom}}
    <link rel="stylesheet" type="text/css" href="/demo/style.css">
    <script src="/demo/index.js"></script>
</head>
<body>
    <section>
        <div id="widge-a" class="ui large header">连锁超市办公用品发货记录</div>
        <div id="widge-b"></div>
        <div id="widge-c"></div>
        <div id="widge-d"></div>
        <div id="widge-e">
            <span class="header-wrapper">
                <strong>产品类别气泡图(X轴:总销售额,Y轴:总利润,面积:订单数)</strong>
                <i chart-unlock class="pin link icon" title="坐标轴固定"></i>
                <i chart-lock class="pin rotated link icon" title="坐标轴自适应"></i>
                <i chart-explode-all class="share alternate link icon" title="打散气泡"></i>
                <i chart-collapse-all class="share alternate flipped link icon" title="聚合气泡"></i>
                <i chart-reset class="undo link icon" title="重置"></i>
            </span>
        </div>
        <div id="widge-f">
            <span class="header-wrapper">
                <strong edit-field="header">订单日期</strong>
                <span class="brush-extent"></span>
                <i chart-play-1 class="play link icon" title="看累积"></i>
                <i chart-play-0 class="forward link icon" title="看变迁"></i>
                <i chart-pause class="pause link icon" title="暂停"></i>
                <i chart-reset class="undo link icon" title="重置"></i>
            </span>
        </div>
    </section>
    <section>
        <div id="widge-g">
            <span class="header-wrapper">
                <strong edit-field="header">顾客细分</strong>
                <i chart-reset class="undo link icon" title="重置"></i>
            </span>
        </div>
        <div id="widge-h">
            <span class="header-wrapper">
                <strong edit-field="header">产品类别</strong>
                <i chart-reset class="undo link icon" title="重置"></i>
            </span>
        </div>
        <div id="widge-i">
            <span class="header-wrapper">
                <strong edit-field="header">邮寄方式</strong>
                <i chart-reset class="undo link icon" title="重置"></i>
            </span>
        </div>

        <div id="widge-j">
            <span class="header-wrapper">
                <strong edit-field="header">利润前50顾客</strong>
                <i chart-reset class="undo link icon" title="重置"></i>
            </span>
        </div>
        <div id="widge-k">
            <span class="header-wrapper">
                <strong edit-field="header">打折最多的城市</strong>
                <i chart-reset class="undo link icon" title="重置"></i>
            </span>
        </div>
        <div id="widge-l">
            <span class="header-wrapper">
                <strong edit-field="header">地区</strong>
                <i chart-reset class="undo link icon" title="重置"></i>
            </span>
        </div>
        <div id="widge-m">
            <span class="header-wrapper">
                <strong edit-field="header">产品子类别-利润</strong>
                <i chart-reset class="undo link icon" title="重置"></i>
            </span>
        </div>
    </section>
    <section>
        <div id="widge-n"></div>
    </section>
</body>
</html>

前端代码 /customs/public/demo/index.js

$( document ).ready( function() {

    var charts = arhat.charts({ uri: board.table });

    charts.digit({
        el: '#widge-b',
        groups: [{ type: 'ALL' }],
        reduces: [{ type: 'Sum', field: '销售额' }],
        template: { bottom: '总销售额' }
    });

    charts.digit({
        el: '#widge-c',
        groups: [{ type: 'ALL' }],
        reduces: [{ type: 'Sum', field: '利润' }],
        template: { bottom: '总利润' }
    });

    charts.digit({
        el: '#widge-d',
        groups: [{ type: 'ALL' }],
        reduces: [{ type: 'Count' }],
        template: { bottom: '订单数' }
    });

    charts.bubble({
        el: '#widge-e',
        groups: [{ field: '产品子类别', type: 'IDENTITY' }],
        reduces: [{ type: 'Sum', field: '销售额' }, { type: 'Sum', field: '利润' }, { type: 'Count' }]
    });

    charts.timeline({
        el: '#widge-f',
        groups: [{ field: '订单日期', type: 'TIMESTAMP', precision: 'WEEK' }],
        reduces: [{ type: 'Count' }]
    });

    charts.pie({
        el: '#widge-g',
        groups: [{ field: '客户细分', type: 'IDENTITY' }],
        reduces: [{ type: 'Count' }]
    });

    charts.pie({
        el: '#widge-h',
        groups: [{ field: '产品类别', type: 'IDENTITY' }],
        reduces: [{ type: 'Count' }]
    });

    charts.pie({
        el: '#widge-i',
        groups: [{ field: '邮寄方式', type: 'IDENTITY' }],
        reduces: [{ type: 'Count' }]
    });

    charts.heat({
        el: '#widge-j',
        groups: [{ field: '客户名称', type: 'IDENTITY', top: 50 }],
        reduces: [{ type: 'Sum', field: '利润' }]
    });

    charts.bar({
        el: '#widge-k',
        groups: [{ field: '城市', type: 'IDENTITY', top: 8 }],
        reduces: [{ type: 'Sum', field: '折扣' }]
    });

    charts.column({
        el: '#widge-l',
        groups: [{ field: '地区', type: 'IDENTITY' }],
        reduces: [{ type: 'Count' }]
    });

    charts.column({
        el: '#widge-m',
        groups: [{ field: '产品子类别', type: 'IDENTITY' }],
        reduces: [{ type: 'Sum', field: '利润' }]
    });

    charts.selections({
        el: '#widge-n'
    });

});

样式表 /customs/public/demo/style.css

section {
    position: relative;
    width: 1280px;
    height: 800px;
    margin: 30px auto;
    box-shadow: 0 0 20px rgba(34,36,38,.15);
}

.header-wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
}

#widge-a {
    position: absolute;
    top: 40px;
    left: 440px;
    width: 400px;
    height: 40px;
    text-align: center;
}

#widge-b {
    position: absolute;
    width: 400px;
    height: 100px;
    top: 80px;
    left: 80px;
}

#widge-c {
    position: absolute;
    width: 400px;
    height: 100px;
    top: 80px;
    left: 500px;
}

#widge-d {
    position: absolute;
    width: 260px;
    height: 100px;
    top: 80px;
    left: 920px;
}

#widge-e {
    position: absolute;
    width: 1080px;
    height: 420px;
    top: 200px;
    left: 120px;
}

#widge-f {
    position: absolute;
    width: 1100px;
    height: 120px;
    top: 640px;
    left: 100px;
}

#widge-g {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 40px;
    left: 80px;
}

#widge-h {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 40px;
    left: 340px;
}

#widge-i {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 40px;
    left: 600px;
}

#widge-j {
    position: absolute;
    width: 720px;
    height: 260px;
    top: 260px;
    left: 80px;
}

#widge-k {
    position: absolute;
    width: 340px;
    height: 480px;
    top: 40px;
    left: 860px;
}

#widge-l {
    position: absolute;
    width: 320px;
    height: 200px;
    top: 560px;
    left: 60px;
}

#widge-m {
    position: absolute;
    width: 780px;
    height: 200px;
    top: 560px;
    left: 480px;
}

#widge-n {
    position: absolute;
    top: 40px;
    left: 40px;
    width: 1200px;
    height: 720px;
}

最终效果

此外,ArhatArhat-charts 还有一些拖拽面板未暴露的高级 API 可供使用,请参阅技术白皮书。

results matching ""

    No results matching ""