深圳网站公司网站建设,logo制作生成器,南阳网站建设新闻,温州展厅设计公司Blazor是一个使用 .NET 生成交互式客户端 Web UI 的框架。目前社区刚起步#xff0c;相关的组件并不多#xff0c;有幸有一群爱好者正在努力建设社区#xff0c;我作为社区一员也来贡献一些内容。这里我就分享分享我封装G2Plot后的Blazor组件ant-design-charts-blazor。ant-… Blazor是一个使用 .NET 生成交互式客户端 Web UI 的框架。目前社区刚起步相关的组件并不多有幸有一群爱好者正在努力建设社区我作为社区一员也来贡献一些内容。这里我就分享分享我封装G2Plot后的Blazor组件ant-design-charts-blazor。ant-design-charts-blazor属于Ant Design of Blazor的一个开源项目我们的目标是做Ant Design在Blazor生态圈最优秀的实现废话不多说先来看一下目前实现的图表。安装与使用项目地址ant-design-blazor/ant-design-charts-blazorgithub.com安装 Nuget 包引用$ dotnet add package AntDesign.Charts在wwwroot/index.html(WebAssembly) 或Pages/_Host.razor(Server) 中引入静态文件:script srchttps://unpkg.com/antv/g2plotlatest/dist/g2plot.js/script
script src_content/AntDesign.Charts/ant-design-charts-blazor.js/script在_Imports.razor中加入命名空间using AntDesign.Charts最后就可以在.razor组件中引用啦Line Datadata Configconfig /code{object[] data new object[] {new { year 1991, value 3 },new { year 1992, value 4 },new { year 1993, value 3.5 },new { year 1994, value 5 },new { year 1995, value 4.9 },new { year 1996, value 6 },new { year 1997, value 7 },new { year 1998, value 9 },new { year 1999, value 13 },
};LineConfig config new LineConfig(){title new Title(){visible true,text 曲线折线图,},description new Description(){visible true,text 用平滑的曲线代替折线。,},padding auto,forceFit true,xField year,yField value,smooth true,};
}
组件的使用相对于原先的G2Plot并没有太多变化主要针对C#语法的特点增加了强类型支持属性命名规则符合C#语法习惯等。所以这篇文章不想多聊如何使用的问题我想谈谈在对G2Plot封装的过程中遇到的一些困难和实现方式希望能为Blazor社区做出一些绵薄的贡献如大佬看了有更好的实现方式希望告知在下。Config对象的封装G2Plot是通过传入一个Config对象来配置图表的呈现内容而且只需要给出必要的参数即可这一切设计的都非常合理。但是用C#实现的时候就遇上了问题当Config对象通过InvokeVoidAsync传到JS后对象会包含所有属性这对于G2Plot来说就画蛇添足了有些默认属性会被带进来的空属性给覆盖了图表显示就出现了问题。当然最简单的就是把值为Null的属性从Config剔除嘿嘿我就是这么干的。通过一个递归遍历对象中的所有属性移除没有值的属性。function isEmptyObj(o) {for (let attr in o) return !1;return !0
}function processArray(arr) {for (let i arr.length - 1; i 0; i--) {if (arr[i] null || arr[i] undefined) arr.splice(i, 1);else if (typeof arr[i] object) removeNullItem(arr[i], arr, i);}return arr.length 0
}function proccessObject(o) {for (let attr in o) {if (o[attr] null || o[attr] undefined) delete o[attr];else if (typeof o[attr] object) {removeNullItem(o[attr]);if (isEmptyObj(o[attr])) delete o[attr];}}
}//清除没有值的项
function removeNullItem(o, arr, i) {let s ({}).toString.call(o);if (s [object Array]) {if (processArray(o) true) {if (arr) arr.splice(i, 1);}} else if (s [object Object]) {proccessObject(o);if (arr isEmptyObj(o)) arr.splice(i, 1);}
}
一个问题解决了有一个问题来了JS/TS是弱类型语言他对象中的属性可以在实例化时任意添加C#可不行他被定义约束的死死的这就遇到下面两个问题有些配置属性不可能穷举所有的属性定义。而且作为组件的封装者不可能无时差的跟进G2Plot对Config定义的变化。针对这两个问题我们需要C#中有一个类似的弱类型的对象这时候我看上了object它可以定义成任何类型如果用它做Config参数可谓是一劳永逸岂不美哉。理想是美好的现实是残酷的。如果用object那么C#的强类型就彻底丧失编写图表配置时完全没有提示基本就是盲写太恐怖了C#的优雅荡然无存。这时突然脑子冒出个念头为啥不能使用两个配置一个是强类型的一个是object然后将他们合并成最终的配置给到G2Plot完美。基本原理就是通过一个递归将传入JS的配置对象挨个对比并将它们合并JS实现代码如下function deepObjectMerge(source, target) {for (var key in target) {if (source[key] source[key].toString() [object Object]) {deepObjectMerge(source[key], target[key])} else {source[key] target[key]}}return source;
}
Blazor中使用方法如下部分代码TabsTabPane Key1Tab示例1/TabChildContentLine Datadata1 Configconfig1 OtherConfigotherConfig1 //ChildContent/TabPane
/Tabscode{LineConfig config1 new LineConfig(){XField date,YField value,};object otherConfig1 new{ new object[]{new{Visible true,data new object []{new { date 2019-05-01, value 4.9 },new { date 2019-10-01 } },Label new{Visible true,Field festival,},},},};
}
G2Plot对象方法调用通过Config生成的图表是静态的没有生命的死物我们需要通过调用它的一些函数给予他生命比如更新配置更新数据设置高亮等等。那么问题就来了IJSRuntime提供的InvokeAsync方法只能返回可以序列化成json的对象通过new G2Plot得到的对象不属于此列我们如何在C#代码中得到G2Plot对象就是个难题了。好在Blazor提供了一个ElementReference对象给我们它只能作为Html对象的引用没法作为JS对象引用有点可惜不过它给我们分配了唯一的Id既然如此我们就曲线救国。第一步得到div的ElementReferencediv refRef/divcode{protected ElementReference Ref;
}第二步构造的G2Plot对象并放到一个叫“chartsContainer”的JS对象中以Ref.Id作为索引const plot new G2Plot[type](domRef, config);
plot.render();
window.AntDesignCharts.chartsContainer[domId] plot;
第三步如果需要调用G2Plot对象的方法那么直接拿着Ref.Id去“chartsContainer”中找到对象后调用下面是“changeData”方法的实现changeData(domId, data, all) {if (window.AntDesignCharts.chartsContainer[domId] undefined) return;window.AntDesignCharts.chartsContainer[domId].changeData(data, all);
},
第四步组件销毁时及时清理“chartsContainer”中不用的对象public async void Dispose()await JS.InvokeVoidAsync(InteropDestroy, Ref.Id);
}
到目前已经完成绝大部分功能还有一些功能需要进一步技术攻关欢迎有兴趣的网友共享你们的代码项目进度情况如下https://github.com/ant-design-blazor/ant-design-charts-blazor/issues/2相关连接微软Reactor_SH活动从 HelloWorld 到 AntDesignBlazor 将 .NET 带到现代前端圈https://www.bilibili.com/video/BV17z4y1Q7cJwww.bilibili.com一套基于 Ant Design 和 Blazor 的企业级组件库https://github.com/ant-design-blazor/ant-design-blazorgithub.com如果您在使用的过程中碰到问题可以通过以下途径寻求帮助同时我们也鼓励资深用户通过下面的途径给新人提供帮助。
