In 9102, how did the front end of ant gold suit write the chart?

Time:2020-1-21

In 9102, how did the front end of ant gold suit write the chart?

I believe that many developers have been mad by charts for a moment: business pressure is great, they want to quickly go to a chart, but they can’t see it after struggling for a long time; in demo, they obviously look beautiful, and the real data immediately becomes the buyer’s show…. for a long time, these problems are also bothering the front end of ants, writing a lightweight chart, why is it so difficult?

In order to make the chart development process easier and more pleasant, ant financial services visualization team combined the business scenarios and chart requirements extracted from the 20000 + business systems in and out of Ali economy and the tens of millions of UV products per day to extract a set of general statistical chart databaseG2Plot

With it, the daily use of the front-end graph of ant gold suit is as follows:

The front-end small K received a relatively tight business demand today – quickly build a panel in the system to show the sales of a product with a chart. Little K passed PD and decided to use itG2PlotCompare the classic area chart, bar chart and ring chart.


Beautiful and intuitive area map

Area chart is the first chart xiaok will make. He will use stacked area chart to show the time trend of multiple indicators.

Step 1: import chart type

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

Step 2: prepare data
The data source format of g2plot is JSON array, and each element of the array is a standard JSON object.
The data below describes the quarterly sales in each region for 2016-2018. Limited exhibition space, only one quarter as an example to show data samples.

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

Step3: generate chartMount the data source, use the ‘time’ field as the X axis and the ‘value’ field as the Y axis in the data, and group and stack the data with the ‘area’ field.

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

In 9102, how did the front end of ant gold suit write the chart?

Don! Just seven lines of code! With the support of antv’s powerful design system, you can see that the quality of the charts rendered by default has been quite high.

However, little K is a front-end for improvement. He needs to further optimize some details of the chart:

Step4: add a title
Adding title and description to the chart can help users get more intuitive information about the topic the chart is to express.

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 gold suit write the chart?

Step5: coordinate axis optimization**
Just before the project is completed, PD and designers together say they have something to say. Both of them think the Y-axis of the chart has optimization space: the designer thinks the scale of the y-axis is too dense, and the four scales are more beautiful visually, while the PD thinks that the label of the y-axis is more standard with a thousandth point display. In the face of these needs, K said he was emotionally stable.

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 gold suit write the chart?

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

Concise bar chart

The second chart to be made next is the stacked bar chart, which will be used to show the sales comparison between different product categories in different regions. The first step of generating a chart is the same as stacking area chart. We go to the core link directly:

Import chart type

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

Generating charts: mount the data source, configure the title, specify the ‘count’ field in the data as the x-axis, the ‘area’ field as the y-axis, and stack it with the ‘cat’ field. Some small details that affect the experience have been done by default: automatically hide when the graphics label display space is not enough, automatically adjust the font color according to the background color to ensure readability, etc.

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 gold suit write the chart?

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

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

In 9102, how did the front end of ant gold suit write the chart?

Flexible and vivid ring chart

The ring chart is the last chart to be made by xiaok. The hollow part in the center and the index card that can interact with the graph are its advantages.

Import 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 gold suit write the chart?

Add index card in the center of ring graph:
The trigger on configuration item defines the linkage between indicator card and graphics.

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


In 9102, how did the front end of ant gold suit write the chart?**


In 9102, how did the front end of ant gold suit write the chart?

At this point, the chart panel of small K is finished, and theG2PlotOnly usedLess than 50 lines of code。 Save time to learn something. Can’t you play a game?

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

Last

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

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

Recommended Today

Summary: NPM common commands and operations

The full name of NPM is (node package manager), which is a package management and distribution tool installed with nodejs. It is very convenient for JavaScript developersDownload, install, upload and manage installed packages。 First of all, the following variables will be used: < name > | < PKG > module name < version > version […]