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(/"/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());