Chen Chao-chao is a contributor to Ant Design Blazor project with more than 10 years of experience in the industry. Net technology stack architecture and product development work, now working for Chint Group. Email: [email protected] Please feel free to contact me if you have any questions. We will make progress together.

background

There are several diagram component libraries currently available in Blazor

  • 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-design-charts-blazor was created by me, and can be found in Enter Blazor for a tutorial. Chapter 1 of this tutorial series 7. Charts

However, all of these chart libraries adopt THE JS library for secondary reassembly without exception. The basic implementation methods are the same. I use Ant-Design-charts-Blazor as an example

The general logic is as follows

  1. First of all byIJSRuntimeInterface with their own developmentown.jsinteract
  2. own.jsIn the chart library API to do a simple encapsulation, the main purpose is to reduce.razorwithG2PlotAfter allIJSRuntimeInterfaces calling JS objects are not as convenient as js calling each other directly
  3. G2PlotWill be inCanvasTo draw the graph
  4. Some of the events in the chart passown.jsCapture and passIJSRuntimeFeedback to.razor

The technical implementation of Ant-Design-charts-Blazor can be found in my previous article using Blazor technology to encapsulate G2Plot to implement the Charts component

With that in mind, Blazor technology brings C# to the front end, while we continue to use the JS chart library. Is it reasonable? It does not make sense, so we should create a chart library based on Blazor technology instead of the JS library.

There is still a small problem here, that is, Canvas provides interfaces oriented to JS, so we need another drawing technology, which needs to give consideration to functions and performance. In fact, you don’t need to choose SVG.

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 elegantly and concisely, and it 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 an easy-to-use, feature-rich chart library based on Blazor technology.

Project address: github.com/TimChen44/b…

Project information

First of all, determine an icon. As the saying goes, once the icon is determined, half of the project is completed 😁. With my ability, I can only combine the chart with @ and design “Suture monster” as my icon 🤣

Next, I decided on some basic concepts for our components, and my future designs tried my best to meet these concepts.

  • Using a simple

Component libraries are intended to be used, so use them in a simple and logical way, with the least possible reliance on documentation.

  • functional

Instead of implementing a bunch of diagrams that will be used in very few scenarios, focus on the ones that will be used the most. Instead of implementing a bunch of features that will be used in a few scenarios, focus on the ones that will be used the most.

  • Information directly

The core purpose of using charts is to solve the problem that table data display is not intuitive, so no matter function, layout, color, animation is for this service.

Introduction to implementation

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

Based on this structure, here is the class diagram of my project, with some abstractions to summarize some elements of the diagram.

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

Graph LR --> Title title --> legend legend --> Axis Axis --> X axis width Axis axis --> Y axis Height X axis width Y axis height Y axis width --> X axis Height Y axis width --> Series Group X axis height --> Series group Series group --> Series A Series B 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=>x.Year.ToString()">
    <BcTitle Title="Chart Sample" 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>
Copy the code

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}}; }Copy the code

Watch for moreBalzor Day 2021In the video