作者：陈超超 Ant Design Blazor
项目贡献者，拥有十多年从业经验，长期基于.Net技术栈进行架构与开发产品的工作，现就职于正泰集团。 邮箱：timchen@live.com
欢迎各位读者有任何问题联系我，我们共同进步。

目前Blazor中可用的图表组件库主要有以下几个

  • ant-design-blazor/ant-design-charts-blazor
    • 基于G2Plot
  • mariusmuntean/ChartJs.Blazor
    • 基于ChartJs
  • blazor-cn/Blazor.ECharts
    • 基于ECharts

ant-design-charts-blazor是我主导完成的，相关使用教程可参阅《进击吧！Blazor！》系列入门教程 第一章 7.图表

然而这些图表库无不例外的采用的JS库进行二次分装，基本实现方式雷同，我以ant-design-charts-blazor举例

在这里插入图片描述

大致逻辑如下

  1. 首先通过IJSRuntime接口与自己开发的own.js进行交互
  2. own.js中对图表库的api做了简单封装，主要目的是减少.razor与G2Plot的交互，毕竟IJSRuntime接口调用js对象没有js之间直接相互调用方便
  3. G2Plot会在Canvas中绘制出图表
  4. 图表中的一些事件通过own.js进行捕捉后通过IJSRuntime反馈给.razor

ant-design-charts-blazor的技术实现方式可详见我之前的文章用Blazor技术封装G2Plot实现Charts组件

看了上述内容，我们思考一下，Blazor技术将C#带到了前端，我们却继续使用着JS的图表库，合理吗？
明显不合理，所以我们应该去创建一个基于Blazor技术构建的图表库替代上面的JS库。

在这里插入图片描述

到这里还有一个小问题，就是Canvas提供的接口都是面向JS的，那么我们需要另外一个绘图技术，需兼顾功能和性能，其实不用选，SVG，就是你了。

可缩放矢量图形（Scalable Vector Graphics，SVG），是一种用于描述二维的矢量图形，基于 XML 的标记语言。作为一个基于文本的开放网络标准，SVG能够优雅而简洁地渲染不同大小的图形，并和CSS，DOM，JavaScript和SMIL等其他网络标准无缝衔接。

BlazorCharts是我主导的开源项目，目标是创建一个基于Blazor技术，使用简单，功能相对丰富的图表库。

项目地址：https://github.com/TimChen44/blazor-charts

首先，确定一个图标，俗话说图标确定后项目就完成了一半

版权声明：本文为MSReactor原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/MSReactor/p/14868381.html