G2 图表统计

index.php

$data1 = [
    [
        "label" => "Mon.",
        "type" => "series1",
        "value" => 2800,
    ],
    [
        "label" => "Mon.",
        "type" => "series2",
        "value" => 2260,
    ],
    [
        "label" => "Tues.",
        "type" => "series1",
        "value" => 1800,
    ],
    [
        "label" => "Tues.",
        "type" => "series2",
        "value" => 1300,
    ],
];

$this->assign('data1' , json_encode($data1));

return $this->fetch("index");

 

index.html

<script>
/*Fixing iframe window.innerHeight 0 issue in Safari*/
    document.body.clientHeight;
</script>

<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.3.0-beta.4/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.9.6/dist/data-set.min.js"></script>
<script src="__ADMIN_JS__/chart.js"></script>

<div class="row">
    <div class="col-sm-4">
        <div id="mountNode1"></div>
    </div>
    <div class="col-sm-4">
        <div id="mountNode2"></div>
    </div>
    <div class="col-sm-4">
        <div id="mountNode3"></div>
    </div>
</div>

<script>

    //one
    i.groupingBarChart('{$data1}', 'mountNode1', 'type', 'label', 'value');

    //two
    i.groupingBarChart('{$data1}', 'mountNode2', 'type', 'label', 'value');
    
    //three
    i.groupingBarChart('{$data1}', 'mountNode3', 'type', 'label', 'value');

</script>

 

chart.js

(function(_) {
    /**
     * 分组条形图
     * @param data object/string json对象/json字符串
     * @param id string id属性值
     * @param type string 分类
     * @param label string 横坐标
     * @param value string 纵坐标
     * @param width int 宽度
     * @param height int 高度
     */
    _.groupingBarChart = function(data, id, type, label, value, width = 300, height = 300) {
        if(typeof(data) != "object" || Object.prototype.toString.call(data).toLowerCase() != "[object object]" || data.length) {
            data = eval('(' + data.replace(/&quot;/g, "\"") + ')');
        }

        var chart = new G2.Chart({
            container: id,
            width: width,
            height: height,
        });
        chart.source(data);
        chart.axis(value, {
            position: 'right'
        });
        chart.axis(label, {
            label: {
                offset: 12
            }
        });
        chart.coord().transpose().scale(1, -1);
        chart.interval().position(label + '*' + value).color(type).adjust([{
            type: 'dodge',
            marginRatio: 1 / 32
        }]);
        chart.render();
    }
})(i = {})

闭包用法

(function(_){
    _.a = 'a';
    _.b = function(){
        return 'b';
    }
    _.c = function(){
        return 'c';
    }
})(i={})

console.log(i.a);
console.log(i.b);
console.log(i.c());