Wechat applet Canvas draws charts

Before, I made a small questionnaire program and made a visualization of the data and saved it as a picture, as follows:At that time, only pie charts were realized, but now I have an idea to complete bar charts, line charts and so on. No sooner said than done. First putThe source code

D3.js visual library

I have studied d3.js roughly before, and I think it is very convenient for D3 to use the function of scale type to process data, so I want to reference scale in the small program, but I do not know that the file is too large, which is not convenient to operate. So they roughly realized a few of their own. These methods will be used to process the data in the diagram.

linearScale

Class MyScaleLinear {constructor() {
        this.domainVal = []
        this.rangeVal = []
    }
    domain(arr) {
        try {
            if(! Array.isArray(arr)) throw'Domain parameter is not an array! ';
            if(arr.length ! == 2) throw'Domain array length not 2';
            this.domainVal = [...arr];
        }
        catch (e) {
            console.error(e)
        }
        return this;
    }
    range(arr) {
        try {
            if(! Array.isArray(arr)) throw'Domain parameter is not an array! ';
            if(arr.length ! == 2) throw'Domain array length not 2';
            this.rangeVal = [...arr];
        }
        catch (e) {
            console.error(e)
        }
        return this.findRange.bind(this);
    }

    findRange(val){
        let  result = (val - this.domainVal[0]) / (this.domainVal[1] - this.domainVal[0]) *  (this.rangeVal[1] - this.rangeVal[0]) +  this.rangeVal[0];
        return result
    }

}

export default MyScaleLinear
Copy the code

OrdinalScale

// Array map class MyScaleOrdinal {constructor() {
        this.domainVal = []
        this.rangeVal = []
    }
    domain(arr) {
        try {
            if(! Array.isArray(arr)) throwThe 'domain argument is not an array. '
            this.domainVal = [...arr]
        } catch (e) {
            console.error(e)
        }
        return this
    }
    range(arr) {
        try {
            if(! Array.isArray(arr)) throwThe 'range argument is not an array. '
            this.rangeVal = [...arr]
        } catch (e) {
            console.error(e)
        }
        return this.findRange.bind(this);
    }
    findRange(val){
        let index = this.domainVal.findIndex((item) => item === val);
        let rlen = this.rangeVal.length
        if (rlen > index) return this.rangeVal[index]
        returnthis.rangeVal[index % rlen]; }}export default MyScaleOrdinal;
Copy the code

ScalePie

Class MyScalePie{constructor() {
        this.arcData = []
        this.hasValueFunc =  false
        this.valueFunc = null
    }
    value(fn) {
        this.hasValueFunc = true;
        this.valueFunc = fn
        return this
    }
    getArcs(arr) {
        try {
            if(! Array.isArray(arr)) throw'getArcs parameter is not array '
            this.arcData = [...arr]
            this.arcData.sort((a, b) =>{
                if (this.hasValueFunc) return this.valueFunc(b) - this.valueFunc(a)
                return b - a
            })
            let totals  = this.arcData.reduce((total, num) => {
                if ( this.hasValueFunc) return total + this.valueFunc(num)
                return total + num
            },0)
            let result = []
            let resObj = {}
            let resValue = 0
            let lastAngle = 0
            let currentAngle = 0
            this.arcData.forEach((num)=>{
                resValue = num
                if ( this.hasValueFunc)  resValue = this.valueFunc(num)
                currentAngle = lastAngle + resValue / totals * Math.PI * 2
                resObj = {
                    data: num,
                    value: resValue,
                    startAngle: lastAngle,
                    endAngle: currentAngle
                }
                result.push(resObj)
                lastAngle = currentAngle
            })
            return  result
        } catch (e) {
            console.error(e)
        }
        return[]}}export default MyScalePie
Copy the code

The effect

Echart visualization is often used, with its data configuration and new color recognition. Roughly copy its appearance to achieve. The effect is as follows:

Bar charts:

The pie chart:The line chartRadar mapThe dashboard