作者：陈超超 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

BlazorCharts是我主导的开源我的项目，指标是创立一个基于Blazor技术，应用简略，性能绝对丰盛的图表库。

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

我的项目信息

首先，确定一个图标，俗话说图标确定后我的项目就实现了一半，以自己的能力，只能将图表和@合并，设计出“缝合怪”作为我的图标

接着，再确定咱们组件的一些根本理念，我今后的设计尽我所能满足这些理念。

  • 应用简略
    组件库是拿来用的，所以应用形式要简略，应用办法要合乎惯例逻辑，争取应用时最大可能的缩小对文档的依赖。
  • 性能实用
    实现一堆极少场景才会应用的图表，不如集中精力做好用的最多的那些图表。
    实现一堆极少场景才会应用的性能，不如集中精力做好用的最多的那些性能。
  • 信息直观
    应用图表的外围目标是解决表格数据显示不直观的问题，所以不管性能、布局、色彩、动画都是为了这个服务。

实现形式介绍

首先咱们看一下图表蕴含的根本元素

基于这个构造，上面是我我的项目的类图，通过一些形象，将图表的一些元素进行了演绎。

图表中每一个元素的大小地位变动都会影响到其余元素，所以地位和布局的确定存在一个先后关系，程序如下

graph LR图表 --> 题目题目 --> 图例图例 --> 坐标轴坐标轴 --> X轴宽度坐标轴 --> Y轴高度X轴宽度 --> Y轴宽度Y轴高度 --> X轴高度Y轴宽度 --> 系列组X轴高度 --> 系列组系列组 --> 系列A系列组 --> 系列B系列组 --> 系列C

图表成果

上面是一个最简略的图表示例

所需的配置

<BcChart Height="600" Width="800" Data="DemoData.Githubs" CategoryField="x=>x.Year.ToString()">    <BcTitle Title="图表示例" TData="Github"></BcTitle>    <BcAxesY TData="Github" GridLineMajor="true" GridLineMinor="true"></BcAxesY>    <BcLegend TData="Github" BorderWidth="1" Position="LegendPosition.Bottom"></BcLegend>    <BcColumnSeries TData="Github" ValueFunc="x=>x.Sum(y=>y.View)" GroupName="View"></BcColumnSeries>    <BcColumnSeries TData="Github" ValueFunc="x=>x.Sum(y=>y.Start)" GroupName="Start"></BcColumnSeries>    <BcLineSeries TData="Github" ValueFunc="x=>x.Sum(y=>y.Fork)" GroupName="Fork" IsSecondaryAxis="true"></BcLineSeries></BcChart>

所需的数据

static class DemoData{    public static List<Github> Githubs = new List<Github>()    {        new Github(){Year=2017,View =2500,Start=800,Fork=400},        new Github(){Year=2018,View =2200,Start=900,Fork=800},        new Github(){Year=2019,View =2800,Start=1100,Fork=700},        new Github(){Year=2020,View =2600,Start=1400,Fork=900},    };}

更多内容请观看《Balzor Day 2021》的视频

https://www.bilibili.com/vide...