webix透视图
使用webix创建数据透视图
官网文档地址：
https://docs.webix.com/api__refs__ui.pivot_props.html
https://docs.webix.com/desktop__pivot.html
数据源有多种方式：
本地数据源：即从后端获取数据到js中再初始化
外联数据源：通过属性url加载文本数据源(csv、json、xml等)或者初始化的同时从后端加载数据。
数据格式在最后。
以下为内联数据：
webix.ready(function(){
webix.ui({
width: "100%",
//布局类型
type: "space",
rows:[
// pivot table 透视表
{
height: 400,
cols: [
{
gravity: 2,
//该container属性绑定的是标签。即init之后内容位于该标签之中
container:"testA",
//这个id不是绑定的标签id。而是该透视表的id
id: "pivot",
view: "pivot",
//需要单独定义每一列的名字。默认取数据的key为列名
fieldMap:{"year":"年","month":"月","storecd":"店铺cd","storename":"店铺名","foodcd":"商品类型cd","foodtype":"商品类型","商品编码":"code","foodname":"商品名","sex":"性别","age":"年龄","salecount":"售卖数","poscount":"pos客数","idcount":"id客数"},
//初始化后几个框中分别处理那几个数值
structure: {
rows: ["storename","foodname"],
columns: ["month"],
values: [{name: "salecount", operation: ["min", "sum"]},
{name: "idcount", operation: ["min", "sum"]},
{name: "poscount", operation: ["min", "sum"]}],
filters: [
//筛选条件的样式：select表示下拉框 text：表示文字匹配
{name: "foodname", type: "select"},
{name: "storename", type: "text"}
]
},
//其中写各种回调或过滤函数
on:{
//内部view初始化之前调用：用于更改内部组件的ui
onViewInit: function(name, config){
//name：内部视图id config：内部视图的配置
//方法用于在表右侧加载过滤框
if(name == "filters" && $$("filters"))
webix.ui(config.elements, $$("filters"));
config.elements = false;
}
}
},
{
id: "filters",
view: "form",
rows:[{}]
}
]
},
// pivot chart 透视图
{
height: 400,
cols:[
{
container:"testChar",
//依然是该视图的id，
id:"pivotChart",
view:"pivot-chart",
gravity: 2,
//图表相关配置
structure:{
//x轴
groupBy: "month",
//y轴
values: [{name:"salecount", operation:"max", color: "#eed236"},
{name:"idcount", operation:"max", color: "#36abee"},
{name:"poscount", operation:"max", color: "#476cee"}],
filters:[{name:"foodname", type:"select"},{name:"storename", type:"select"}]
},
//图表类型：此处为折线图
chartType: "line",
chart: {
scale: "logarithmic",
barWidth: 25,
legend: {
layout: "x",
align: "center",
valign: "bottom"
}
},
//回调函数相关
on:{
onViewInit: function(name, config){
if(name == "filters" && $$("chartFilters"))
webix.ui(config.elements, $$("chartFilters"));
config.elements = false;
}
}
},
{
view: "form",
rows:[
{ id: "chartFilters", rows:[]},
{},
//下面这段代码：用于在右侧查询条处增加一个按钮，用于打开filter悬浮层
// { view: "button", type:"form", label: "Change Structure", height:46, click: function(){
// $$("pivotChart").configure()
// }}
]
}
]
}
]
});
//内联数据
$$("pivot").parse(webix.copy(pivot_dataset));
$$("pivotChart").parse(webix.copy(pivot_dataset));
});
下面为外联数据：此处外联数据使用csv格式的数据
webix.ready(function(){
webix.ui({
width: "100%",
// 布局类型
type: "space",
//外联数据格式1。还有一种方式，在最后
// url:"/table.demo/data.json",
//当数据格式不是json时，该属性必须写明数据格式
//datatype:"csv"
rows:[
// pivot table
{
height: 400,
cols: [
{
gravity: 2,
container:"testA",
id: "pivot",
view: "pivot",
//该属性表明csv文件的每一列数据的昵称，从零开始
fieldMap:{"data0":"年",
"data1":"月",
"data2":"店铺cd",
"data3":"店铺名",
"data4":"商品类型cd",
"data5":"商品类型",
"data6":"商品编码",
"data7":"商品名",
"data8":"性别",
"data9":"年龄",
"data10":"售卖数",
"data11":"pos客数",
"data12":"id客数"},
//透视表的具体过滤数据等配置
//下面配置中，使用的是data0而不是用列昵称
structure: {
rows: ["data3","data7"],
columns: ["data1"],
values: [{name: "data10", operation: ["min", "sum"]},
{name: "data11", operation: ["min", "sum"]},
{name: "data12", operation: ["min", "sum"]}],
filters: [
{name: "data7", type: "text"},
{name: "data3", type: "select"},
{name: "data8", type: "select"}
]
},
//回调函数之类
on:{
onViewInit: function(name, config){
if(name == "filters" && $$("filters"))
webix.ui(config.elements, $$("filters"));
config.elements = false;
},
//加载之前调用
onBeforeLoad:function(){
//通知webix加载数据等待相关模块
webix.extend($$("pivot"), webix.OverlayBox);
//启用等待数据模块
//在()中可以定义html标签或者字等
this.showOverlay("
");
},
//加载之后调用
onAfterLoad:function(){
webix.extend($$("pivot"), webix.OverlayBox);
this.hideOverlay();
}
}
},
{
id: "filters",
view: "form",
rows:[{}]
}
]
},
// pivot chart
{
height: 400,
cols:[
{
id:"pivotChart",
view:"pivot-chart",
fieldMap:{"data0":"年",
"data1":"月",
"data2":"店铺cd",
"data3":"店铺名",
"data4":"商品类型cd",
"data5":"商品类型",
"data6":"商品code",
"data7":"商品名",
"data8":"性别",
"data9":"年龄",
"data10":"售卖数",
"data11":"pos客数",
"data12":"id客数"},
gravity: 2,
structure:{
groupBy: "data1",
values: [{name:"data10", operation:"max", color: "#eed236"},
{name:"data11", operation:"max", color: "#36abee"},
{name:"data12", operation:"max", color: "#476cee"}],
filters:[{name:"data7", type:"select"},
{name:"data3", type:"select"}]
},
chartType: "line",
chart: {
scale: "logarithmic",
barWidth: 25,
legend: {
layout: "x",
align: "center",
valign: "bottom"
}
},
on:{
onViewInit: function(name, config){
if(name == "filters" && $$("chartFilters"))
webix.ui(config.elements, $$("chartFilters"));
config.elements = false;
}
}
},
//右侧空白框
{
view: "form",
rows:[
{ id: "chartFilters", rows:[]},
{},
//去掉右侧的filter框按钮
// { view: "button", type:"form", label: "Change Structure", height:46, click: function(){
// $$("pivotChart").configure()
// }}
]
}
]
}
]
});
//外联json数据
// $$("pivot").load("../table.demo/data.json");
// $$("pivotChart").load("../table.demo/data.json");
//外联csv数据
//非json格式，必须在load的第二个参数上写明数据格式
// $$("pivot").load("../table.demo/data.csv","csv");
$$("pivot").load("../table.demo/data.csv","csv");
$$("pivotChart").load("../table.demo/data.csv","csv")
});
图表重新加载相关
//清理透视表数据,此处使用的id是模块的id，即配置时的id，而非标签的id
$$("pivot").clearAll();
//清理透视图数据
$$("pivotChart").clearAll();
//重新指明数据源，并加载数据
$$("pivot").load("../table.demo/data.csv","csv");
$$("pivotChart").load("../table.demo/data.csv","csv")
数据格式：
//json格式
var data = [{”xxx“:"xxx",“xxx”:“xxx”},{”xxx“:"xxx",“xxx”:“xxx”}]
//csv格式
//没有标题行，直接就是数据
