How to draw a cool radar chart in CocosCreator

Preface

Radar Chart is also called network chart, star chart or spider web chart.

It is a graphical method of displaying multivariate data in the form of a two-dimensional graph of three or more quantitative variables represented on axes starting from the same point.

Applies to variables that display three or more dimensions.

Radar charts are often used for data statistics or comparisons. They are useful for seeing which variables have similar values ​​and whether there are outliers between variables.

At the same time, radar charts are used in many games, which can display and compare some data very intuitively.

For example, the battle data in King of Glory is used:

In this article, Pipi will share how to use the Graphics component in Cocos Creator to draw cool radar charts.

The original code will be cut down to ensure the reading experience.

Radar chart component: https://gitee.com/ifaswind/eazax-ccc/blob/master/components/RadarChart.ts

Preview

Let’s take a look at the effect first~

Online preview: https://ifaswind.gitee.io/eazax-cases/?case=radarChart

Two pieces of data

Easing data

Bells and whistles

Art is explosion

Gradually deviating from the topic

text

Graphics Component

Before we start making the radar chart, let's take a look at the Graphics component in the Cocos Creator engine.

The Graphics component inherits from cc.RenderComponent . Using this component, we can implement functions such as drawing boards and tables.

Properties

Here are the properties we will use this time:

• lineCap : Sets or returns the style of both ends of a line (none, round caps, or square caps)
• lineJoin : Sets or returns the corner style (bevel, rounded, or sharp) when two lines intersect
• lineWidth : Sets or returns the thickness of the current brush (the width of the line)
• strokeColor : Sets or returns the current brush color
• fillColor : Sets or returns the fill color (paint bucket)

Functions

Here are the functions we will use this time:

• moveTo(x, y) : lifts the pen and moves it to the specified position (does not create a line)
• lineTo(x, y) : Put down the pen and create a straight line to the specified position
• circle(cx, cy, r) : Draw a circle at the specified position (center of the circle)
• close() : Close the created line (equivalent to lineTo(起點) )
• stroke() : Draws a line that has been created (but not drawn) (think of the line as transparent by default, this behavior gives the line a color)
• fill() : Fills the area enclosed by the current line (if the line is not closed, it will try to "simulate closing" the start and end points)
• clear() : Erase everything on the current drawing board

Graphics component documentation: http://docs.cocos.com/creator/manual/zh/components/graphics.html?h=graphics

Draw a grid

Let’s first take a look at the characteristics of a standard radar chart:

Did you find it? The basic features of radar chart are as follows:

• There are 3 or more axes
• The angles between the axes are the same
• Each axis should have at least 1 scale mark besides the center point.
• The same scale on each axis
• The distance between the scales is also the same
• The scales between the axes are connected to form grid lines

Calculate axis angle

First calculate the angle between the axes [ 360 ÷ 軸數], then calculate the angles of all axes:

this.angles = [];
// Angle between axes const iAngle = 360 / this.axes;
for (let i = 0; i < this.axes; i++) {
    // Calculate const angle = iAngle * i;
    this.angles.push(angle);
}

Calculate scale coordinates

A radar chart has at least three axes, and each axis should have one or more scales (excluding the center point) :

So we need to use a two-dimensional array to save the coordinates of all the scales, starting from the outermost scale (that is, the end of the axis), so that we can read it when drawing:

// Create a two-dimensional array let scalesSet: cc.Vec2[][] = [];
for (let i = 0; i < number of scales on the axis; i++) {
    // Used to save the scale coordinates on the current layer let scales = [];
    // Calculate the position of the scale on the axis const length = axis length - (axis length / number of scales on the axis * i);
    for (let j = 0; j < this.angles.length; j++) {
        // Convert angle to radians const radian = (Math.PI / 180) * this.angles[j];
        // Calculate the coordinates of the scale relative to the center point (0, 0) according to the trigonometric formula const pos = cc.v2(length * Math.cos(radian), length * Math.sin(radian));
        // Push array scales.push(pos);
    }
    // Push the two-dimensional array scalesSet.push(scales);
}

Draw axis lines and outer grid lines

Axis

The scale connecting the center point (0, 0) and the outermost scalesSet[0] is the axis:

// Traverse all the outermost scales for (let i = 0; i < scalesSet[0].length; i++) {
    // Move the brush to the center point this.graphics.moveTo(0, 0);
    // Create a line this.graphics.lineTo(scalesSet[0][i].x, scalesSet[0][i].y);
}

Outer grid lines

Connecting the outermost scalesSet[0] scales on all axes forms the outer grid lines:

// Move the brush to the first point this.graphics.moveTo(scalesSet[0][0].x, scalesSet[0][0].y);
for (let i = 1; i < scalesSet[0].length; i++) {
    // Create a line this.graphics.lineTo(scalesSet[0][i].x, scalesSet[0][i].y);
}
// Close the current line (outer grid line)
this.graphics.close();

Fill and draw

Here you need to pay attention to fill the color first and then draw the lines , otherwise the axis and grid lines will be blocked:

// Fill the blank area surrounded by lines this.graphics.fill();
// Draw the created lines (axis lines and outer grid lines)
this.graphics.stroke();

So now we have something like this:

Draw inner grid lines

When the number of scales is greater than 1, it is necessary to draw the inner grid lines, starting from the subscript 1 of the scale coordinate set:

// Draw inner grid lines only when the number of scales is greater than 1 if (scalesSet.length > 1) {
    // Start from the bottom 1 (subscript 0 is the outer grid line)
    for (let i = 1; i < scalesSet.length; i++) {
        // Move the brush to the first point this.graphics.moveTo(scalesSet[i][0].x, scalesSet[i][0].y);
        for (let j = 1; j < scalesSet[i].length; j++) {
            // Create a line this.graphics.lineTo(scalesSet[i][j].x, scalesSet[i][j].y);
        }
        // Close the current line (inner grid line)
        this.graphics.close();
    }
    // Draw the created lines (inner grid lines)
    this.graphics.stroke();
}

In this way, the base of our radar chart is drawn:

Drawing Data

Before writing the line drawing logic, let's first determine the data structure we need:

• Numeric array (required, ratio in decimal form, at least 3 values)
• Line width (optional, default value is used if not specified)
• Line color (optional, default value is used if not specified)
• Fill color (optional, default value is used if not specified)
• Node color (optional, default value is used if not specified)

The specific data structure is as follows (the export type is convenient for external use):

/**
 * Radar chart data */
export interface RadarChartData {

    /** Value */
    values: number[];

    /** Line width */
    lineWidth?: number;

    /** Line color */
    lineColor?: cc.Color;

    /** Fill color */
    fillColor?: cc.Color;

    /** Node color */
    joinColor?: cc.Color;

}

Plotting the data

Plotting data is relatively simple. We just need to figure out where the data points are on the graph and connect the data.

In the draw function, we receive one or more radar chart data and draw them in order (⚠️ long code warning):

/**
 * Drawing data * @param data data */
public draw(data: RadarChartData | RadarChartData[]) {
    // Process data const datas = Array.isArray(data) ? data : [data];

    // Start drawing data for (let i = 0; i < datas.length; i++) {
        // Load dye this.graphics.strokeColor = datas[i].lineColor || defaultOptions.lineColor;
        this.graphics.fillColor = datas[i].fillColor || defaultOptions.fillColor;
        this.graphics.lineWidth = datas[i].lineWidth || defaultOptions.lineWidth;

        // Calculate node coordinates let coords = [];
        for (let j = 0; j < this.axes; j++) {
            const value = datas[i].values[j] > 1 ? 1 : datas[i].values[j];
            const length = value * this.axisLength;
            const radian = (Math.PI / 180) * this.angles[j];
            const pos = cc.v2(length * Math.cos(radian), length * Math.sin(radian))
            coords.push(pos);
        }

        // Create a line this.graphics.moveTo(coords[0].x, coords[0].y);
        for (let j = 1; j < coords.length; j++) {
            this.graphics.lineTo(coords[j].x, coords[j].y);
        }
        this.graphics.close(); // Close the line // Fill the enclosed area this.graphics.fill();
        // Draw a line this.graphics.stroke();

        // Draw data nodes for (let j = 0; j < coords.length; j++) {
            // Big circle this.graphics.strokeColor = datas[i].lineColor || defaultOptions.lineColor;
            this.graphics.circle(coords[j].x, coords[j].y, 2);
            this.graphics.stroke();
            // small circle this.graphics.strokeColor = datas[i].joinColor || defaultOptions.joinColor;
            this.graphics.circle(coords[j].x, coords[j].y, .65);
            this.graphics.stroke();
        }

    }
}

So far we have successfully made a usable radar chart:

but! Our journey is to the sea of ​​stars! Must add some ingredients!

A completely static radar chart is too boring and ordinary. We need to think of a way to make it animated!

The values ​​of our radar chart data are in array form. Have you thought about how to make these values ​​​​move?

Thanks to the Tween easing system provided by Cocos Creator, it is very easy to animate complex data!

We just need to do this, this, and then that, isn't it simple?

cc.tween supports easing any property of any object

Easing system: http://docs.cocos.com/creator/manual/zh/scripting/tween.html

In addition, I also used the easing system in "An All-Round Hole Digging Shader" to make the digging move~

Online preview: https://ifaswind.gitee.io/eazax-cases/?case=newGuide

My idea is:

1. Save the current data to this.curDatas of the current instance
2. When new data is received, use cc.tween to ease the properties of this.curData
3. Call the draw function in update to redraw the data in this.curDatas every frame

Update every frame

// Current radar chart data private curDatas: RadarChartData[] = [];

protected update() {
    if (!this.keepUpdating) return;
    // Draw the current data this.draw(this.curDatas);
}

Easing data

/**
 * Slow-motion drawing* @param data target data* @param duration animation duration*/
public to(data: RadarChartData | RadarChartData[], duration: number) {
    // Handle repeated calls this.unscheduleAllCallbacks();
    
    // Pack a single piece of data const datas = Array.isArray(data) ? data : [data];

    // Turn on each frame update this.keepUpdating = true;

    // Move!
    for (let i = 0; i < datas.length; i++) {
        // Animating the values!
        // Traverse all the values ​​in the data and make them move one by one!
        for (let j = 0; j < this.curDatas[i].values.length; j++) {
            // Limit the maximum value to 1 (i.e. 100%)
            const value = datas[i].values[j] > 1 ? 1 : datas[i].values[j];
            cc.tween(this.curDatas[i].values)
                .to(duration, { [j]: value })
                .start();
        }
        // Style in motion!
        // If not specified, the original style will be used!
        cc.tween(this.curDatas[i])
            .to(duration, {
                lineWidth: datas[i].lineWidth || this.curDatas[i].lineWidth,
                lineColor: datas[i].lineColor || this.curDatas[i].lineColor,
                fillColor: datas[i].fillColor || this.curDatas[i].fillColor,
                joinColor: datas[i].joinColor || this.curDatas[i].joinColor
            })
            .start();
    }

    this.scheduleOnce(() => {
        // Turn off each frame update this.keepUpdating = false;
    }, duration);
}

Both the value and the style are animated:

Radar chart component: https://gitee.com/ifaswind/eazax-ccc/blob/master/components/RadarChart.ts

The above is the details of how to draw a cool radar chart in CocosCreator. For more information about drawing a radar chart in CocosCreator, please pay attention to other related articles on 123WORDPRESS.COM!