In 9102, how did the front end of ant financial service write the chart?

Time:2021-4-19

I believe many developers have been crazy by charts for a while: business pressure is high, they want to quickly go to a chart, but they can’t watch it. In demo, it’s beautiful to see it, and the real data immediately becomes a buyer show. For a long time, these problems are also bothering the front end of ants. How can it be so difficult to write a lightweight chart?

In order to make the chart development process simpler and more enjoyable, the ant financial services visualization team has extracted a set of general statistical chart library by combining the business scenarios and chart requirements extracted from the ﹣ 20000 + business system inside and outside Alibaba economy and the daily average 10 million level UV productsG2Plot

With it, the front end of ant financial services uses charts like this:

Front end small K received a tight business demand today – quickly build a panel in the system to show the sales of a product with a chart. Small K and PD after a while, decided to useG2Plot  Compare the classic area chart, bar chart and ring chart.


Beautiful and intuitive area map

Area chart is the first chart to be made by Xiao K. he will use stacked area chart to show the time trend of multiple indicators.

Step 1: introduce chart type

import { StackArea } from '@antv/g2plot';

Step 2: preparing data
The data source format of g2plot is a JSON array, and each element of the array is a standard JSON object.
The following data describes the quarterly sales of each region from 2016 to 2018. The display space is limited, and only one quarter is taken as an example to show data samples.

const data = [
  {time: '2018 Season 1', area: 'Northeast', value: 190567},
  {time: 'January 2018', area: 'North China', value: 80122},
  {time: '2018 Season 1', area: 'East China', value: 223720},
  {time: '2018 Season 1', area: 'Northwest', value: 157845},
  {time: 'January 2018', area: 'Central South', value: 60343},
  {time: '2018 Season 1', area: 'southwest', value: 98810},
];

Step 3: generate chartTo mount the data source, the ‘time’ field is used as the x-axis and the ‘value’ field as the y-axis, and the ‘area’ field is used to group and stack the data.

const area = new StackArea(
  document.getElementById ('area container ') // gets the chart container
  {
    data,
    xField: 'time',
    yField: 'value',
    stackField: 'area'
  }// chart configuration item
);
area.render();

In 9102, how did the front end of ant financial service write the chart?

Done!   Only 7 lines of code! Antv With the powerful design system, you can see that the quality of the chart rendered by default is already quite high.

However, Xiao K is a front-end that keeps improving. He also needs to further optimize some details of the chart

Step 4: add a title
Adding title and description to the chart can help users get the topic information more intuitively.

const area = new StackArea(document.getElementById('area-container'), {
  title: {
    visible: true,
    Text: 'regional sales trend',
  },
  data,
  xField: 'time',
  yField: 'value',
  stackField: 'area'
});
area.render();

In 9102, how did the front end of ant financial service write the chart?

Step5: axis optimization**
Just before the completion of the project, the PD and the designer said together that they still have something to say. Both of them think that the Y-axis of the chart has room for optimization: the designer thinks that the scale of the y-axis is too dense, and the four scales are more beautiful visually, while PD thinks that the label of the y-axis is more standard to display in thousandths. In the face of these needs, small K said his emotional stability.

const area = new StackArea(document.getElementById('area-container'), {
  title: {
    visible: true,
    Text: 'regional sales trend',
  },
  data,
  xField: 'time',
  yField: 'value',
  stackField: 'area',
  yAxis: {
    tickCount: 4,
    label: {
      formatter: (v) => {
        return Math.floor(v / 1000) + 'k';
      },
    },
  },
});
area.render();

In 9102, how did the front end of ant financial service write the chart?

Finished, only less than 20 lines of code, easy to generate stacking area map.

A concise bar chart

The next chart to be made is the stacked bar chart, which will be used to show the sales comparison of various product categories in different regions. The front step of generating a chart is the same as that of stacking area chart. Let’s go directly to the core step

Introduce chart type

import { StackBar } from '@antv/g2plot';

Generate chart: mount the data source, configure the title, specify the ‘count’ field as the X axis, the ‘area’ field as the Y axis, and stack the ‘cat’ field. Some small details that affect the experience have been done by default: the graphic label is automatically hidden when the display space is not enough, the font color is automatically adjusted according to the background color to ensure readability, and so on.

const bar = new StackBar(document.getElementById('bar-container'), {
  data,
  xField: 'count',
  yField: 'area',
  stackField: 'cat',
});
bar.render();

In 9102, how did the front end of ant financial service write the chart?

Replace the color plate
The designer thinks that this chart compares category data, not region data, so it should not use a color board with stacking area chart in color. No problem, the palette is easy:

color: ['#945fb9', '#1e9493', '#ff9845']

In 9102, how did the front end of ant financial service write the chart?

Flexible and vivid ring graph

The ring chart is the last chart to be made in this small K project. The hollow out part of the center and the index card that can interact with the graphics are its advantages.

Introduce chart type

import { Ring } from '@antv/g2plot';

Generate chart:The ‘Bill’ field in the specified data determines the slice size of the ring graph, and the ‘area’ field determines the slice color.

const ring = new Ring(document.getElementById('ring-container'), {
  data,
  angleField: 'bill',
  colorField: 'area',
});

In 9102, how did the front end of ant financial service write the chart?

Add index card of ring graph Center:
Triggeron configuration item defines the linkage mode between indicator card and graphics.

statistic:{
  visible: true,
    triggerOn:'mouseenter'
  }
});


In 9102, how did the front end of ant financial service write the chart?**


In 9102, how did the front end of ant financial service write the chart?

So far, the chart panel of small K has been made, and the use ofG2PlotIt’s just a matter of timeLess than 50 lines of code. Save the time to learn something, play a game, roll the cat is not good?

G2PlotIt has been iterating continuously in an open source way. In addition to serving many businesses of ant financial services, we also hope that this set of chart library polished and tempered by enterprise level scenarios can help more people solve the problem of making charts.   

last

aboutG2PlotFor more technical details and detailed progress, please pay attention to us through the following channels. Welcome to star, let more people see this open source project:

  • GitHub:https://github.com/antvis/g2plot
  • Official website: https://antv-g2plot.gitee.io/zh

Recommended Today

Angularjs in simple terms: $scope

What is $scope In short, it is the scope (the execution environment of the expression); It is the basis of MVC, and it is also the basis of data bidirectional binding. It can be understood as a tree structure parallel to the DOM tag. The child $scope object will inherit the properties and methods on […]