统计数据
本示例演示了如何在前端js使用Foxtable的复杂类型，以最常用的GroupTableBuilder为例
。
本示例可参考示例文件"CaseStudy\WebViewer\调用Foxtable对象.Table"的窗口"使用GroupTableBuilder"。
该示例的AfterLoad事件代码如下：
'''Async
Dim
wv
As
WebViewer = e.Form.Controls("WebViewer1").WebViewer
Await
wv.EnsureCoreWebView2Async(Nothing)
'初始化浏览器
Dim
ft
As
New
FoxLib(wv)
'创建Foxtable库
wv.CoreWebView2.AddHostObjectToScript("ft",
ft) '注入Foxtable库
'定义测试页面
Dim
html
As
String
=
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>分组统计生成器测试</title>
<style>
*{font-size:16px; margin:5px;}
button{padding:6px 20px; font-size:14px; margin:10px 5px;
cursor:pointer;background:#5cb85c;color:#fff;border:none;border-radius:6px;}
</style>
</head>
<body>
<h3>GroupTableBuilder
分组统计测试</h3>
<button onclick="stat1()">统计1：按产品分组统计销量</button>
<button onclick="stat2()">统计2：按年+月分组统计销量和金额</button>
<button onclick="stat3()">统计3：年月分组+同比+环比增长率</button>
<button onclick="stat4()">统计4：按班级统计成绩(平均/最高/最低)</button>
<script>
const ft = window.chrome.webview.hostObjects.sync.ft; //引用Foxtable库
//统计1：按产品分组，统计数量
function stat1() {
const b = ft.GroupTableBuilder("统计表1",
ft.DataTables["订单"]);
b.Groups.AddDef(["产品"]);
b.Totals.AddDef("数量");
b.Build();
ft.MainTable = ft.Tables["统计表1"];
}
//统计2：按年+月分组，统计数量和金额
function stat2() {
const b = ft.GroupTableBuilder("统计表1",
ft.DataTables["订单"]);
b.Groups.AddDef("日期",
ft.DateGroupEnum.Year, "年");
b.Groups.AddDef("日期",
"月");
b.Totals.AddDef("数量");
b.Totals.AddDef("金额");
b.Build();
ft.MainTable = ft.Tables["统计表1"];
}
//统计3：年月分组+销量金额重命名+同比+环比
function stat3() {
const g = ft.GroupTableBuilder("统计表1",
ft.DataTables["订单"]);
g.Groups.AddDef("日期",
ft.DateGroupEnum.Year, "年");
g.Groups.AddDef("日期",
"月");
g.Totals.AddDef("数量",
"", "数量_值");
g.Totals.AddDef("金额",
"", "金额_值");
g.SamePeriodGrowth = true;
g.CircleGrowth = true;
g.Build();
ft.MainTable = ft.Tables["统计表1"];
}
//统计4：按班级分组，统计语文/数学的平均分、最高分、最低分
function stat4() {
const g = ft.GroupTableBuilder("统计表1",
ft.DataTables["学生成绩"]);
g.Groups.AddDef("班级");
g.Totals.AddDef("语文",
ft.AggregateEnum.Average, "语文_平均");
g.Totals.AddDef("语文",
ft.AggregateEnum.Max, "语文_最高");
g.Totals.AddDef("语文",
ft.AggregateEnum.Min, "语文_最低");
g.Totals.AddDef("数学",
ft.AggregateEnum.Average, "数学_平均");
g.Totals.AddDef("数学",
ft.AggregateEnum.Max, "数学_最高");
g.Totals.AddDef("数学",
ft.AggregateEnum.Min, "数学_最低");
g.Decimals = 2;
g.Build();
ft.MainTable = ft.Tables["统计表1"];
}
</script>
</body>
</html>
]]>.Value
wv.NavigateToString(html)
'打开测试页面