Author: Chen Chaochao Ant Design Blazor


Project contributor, has more than 10 years of working experience, long-term based on. NET technology stack architecture and product development work, now working in Chint Group. Email address: [email protected]


Readers are welcome to contact me if you have any questions. We will make progress together.

background

The chart component libraries currently available in Blazor are as follows

  • ant-design-blazor/ant-design-charts-blazor

    • Based on the G2Plot

  • mariusmuntean/ChartJs.Blazor

    • Based on the ChartJs

  • blazor-cn/Blazor.ECharts

    • Based on the ECharts

Ant-Desk-Charts-Blazor was developed by me, and the related tutorial can be read
Blazer! Blazer! Chapter 1 of the series 7. Charts

However, these chart libraries, without exception, adopt JS library for secondary installation, and the basic implementation method is the same. I take Ant-Desk-Charts-Blazor as an example

The general logic is as follows

  1. First of all byIJSRuntimeInterface with self-developedown.jsinteract
  2. own.jsIn the chart library API to do a simple encapsulation, the main purpose is to reduce.razorwithG2PlotThe interaction, after allIJSRuntimeInterfaces calling JS objects are not as convenient as calling JS objects directly from one JS to another
  3. G2PlotWill be inCanvasDraw the chart in
  4. Some of the events in the chart passown.jsCapture and passIJSRuntimeFeedback to.razor

The technical implementation of ant-designed-charts-blazor is detailed in my previous article
The Charts component of the G2Plot implementation is encapsulated with Blazor technology

With Blazor technology bringing C# to the forefront, is it reasonable for us to continue using JS’s chart library? This is obviously not reasonable, so we should create a chart library based on Blazor technology instead of the JS library above.

There is still a small problem here, that is, the interface provided by Canvas is JS-oriented, so we need another drawing technology, which needs both function and performance. In fact, there is no need to choose SVG, it is you.

Scalable Vector Graphics (SVG) is an XML-based markup language for describing two-dimensional Vector Graphics. As a text-based open web standard, SVG can render graphics of different sizes gracefully and concisely, and works seamlessly with other web standards such as CSS, DOM, JavaScript, and SMIL.

BlazorCharts

BlazorCharts is an open source project led by me. The goal is to create a chart library based on Blazor technology that is simple to use and relatively rich in features.

The address of the project: https://github.com/TimChen44/blazor-charts

Project information

First of all, to determine an icon, as the saying goes after the icon to determine the project is completed half 😁, to my ability, can only merge the chart and @, design a “stitching strange” as my icon

Then, I decided on some basic ideas for our components, and my future designs did my best to meet these ideas.

  • The use of simple component libraries is to be used, so use the way simple, use the method to follow the general logic, strive for the use of the greatest possible to reduce the dependence on the document.
  • It is better to implement a bunch of charts that are used in very few scenarios than to concentrate on the most used charts. It’s better to implement a bunch of features that are used in very few scenarios than to focus on the features that are used the most.
  • The core purpose of using charts and graphs is to solve the problem that tabular data display is not intuitive, so function, layout, color, animation are all for this service.

Introduction to the implementation mode

First let’s look at the basic elements of the diagram

Based on this structure, the following is the class diagram of my project, which summarizes some elements of the diagram through some abstractions.

The size and position of each element in the diagram will affect the other elements, so there is a precedence relationship between position and layout, in the following order

Graph LR chart - > title title -- -- -- -- > > illustrations illustrations axes coordinate axis -- -- > X coordinate axis width height X width > Y Y > Y width height -- - > X height Y axis width X height > series group -- - > series group Series group --> series A series group --> series B series group --> series C

Effect of the chart

Here is an example of the simplest diagram

Required configuration

<BcChart Height="600" Width="800" Data=" demodata.githubs "categoryField ="x= bb0 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>

Required data

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},
    };
}

For more, check out the Balzor Day 2021 video

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