微信小程序canvas 绘制图表

之前做了一个问卷小程序，做了一个将数据可视化保存为图片，如下：

当时仅仅实现绘制饼图，现在有个想法把柱状图、折线图等补齐。说干就干。
先放源码

d3.js 可视化库

之前有粗略学习过d3.js， 觉得D3 使用scale 类型的函数处理数据十分方便，于是想把scale放在小程序中引用，殊不知文件太大了，不方便操作。于是便粗略的自己实现了几个。这些方法将会再绘制图表中处理数据使用。

linearScale

// 映射 值域

class MyScaleLinear {
    constructor() {
        this.domainVal = []
        this.rangeVal = []
    }
    domain(arr) {
        try {
            if (!Array.isArray(arr)) throw 'domain 参数不是一个数组!';
            if (arr.length !== 2)    throw 'domain 数组长度不为2';
            this.domainVal = [...arr];
        }
        catch (e) {
            console.error(e)
        }
        return this;
    }
    range(arr) {
        try {
            if (!Array.isArray(arr)) throw 'domain 参数不是一个数组!';
            if (arr.length !== 2)    throw 'domain 数组长度不为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

OrdinalScale

// 数组map
class  MyScaleOrdinal {
    constructor() {
        this.domainVal = []
        this.rangeVal = []
    }
    domain(arr) {
        try {
            if (!Array.isArray(arr)) throw 'domain 参数不是一个数组。'
            this.domainVal = [...arr]
        } catch (e) {
            console.error(e)
        }
        return this
    }
    range(arr) {
        try {
            if (!Array.isArray(arr)) throw 'range 参数不是一个数组。'
            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]
        return this.rangeVal[index % rlen];
    }
	
	

}

export default MyScaleOrdinal;

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 参数为非数组'
            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

效果

经常使用的是 Echart 可视化，对它的数据配置以及新版的颜色认可。便粗略仿照它的样子去实现。效果如下：

柱状图：

饼图：

折线图

雷达图

仪表盘