分类 creator/u3d/ue4/bablon 下的文章

creator里面没有折线图，可以参考这个

// 折线图
const { ccclass, property } = cc._decorator;

@ccclass
export default class LineChartComponent extends cc.Graphics {
    @property(cc.Color)
    lineColor: cc.Color = null;
    @property(cc.Color)
    circleColor: cc.Color = null;
    @property(cc.Color)
    xyColor: cc.Color = null;
    @property
    height = 200;
    @property
    width = 600;
    @property
    stepLeve = 7;

    public paint = null;
    onLoad() {
        this.width += Math.floor(this.width / this.stepLeve);
    }
    onDestroy() {

    }

    start() {
        this.paint = this.node.addComponent(cc.Graphics);
    }

    randChart() {
        let list = [];
        for (let i = 0; i < this.stepLeve; i++) {
            list.push(Math.random() * 100);
        }
        this.setLineChart(list, null);
    }

    setLineChart(listY, listX) {
        let color = this.lineColor;
        // 计算数据
        let max = Math.max.apply(null, listY);
        let min = Math.min.apply(null, listY);
        let yd = this.height / (max - min);
        let xd = this.width / listY.length;

        // 画横轴
        this.paint.lineWidth = 5;
        this.paint.strokeColor = new cc.Color(66, 66, 66, 66);
        this.paint.moveTo(0, 0);
        for (let i = 0; i <= this.stepLeve; i++) {
            this.paint.moveTo(0, i * this.height / this.stepLeve);
            this.paint.lineTo(this.width, i * this.height / this.stepLeve);
            this.putLabel(-20, i * this.height / this.stepLeve - 15, Math.floor((i * (max - min) / this.stepLeve) + min), 25)
        }
        this.paint.stroke();

        // 画数据线
        this.paint.lineWidth = 5;
        this.paint.strokeColor = color;
        this.paint.moveTo(1, (listY[0] - min) * yd);
        for (let i = 1; i < listY.length; i++) {
            this.paint.lineTo(i * xd, (listY[i] - min) * yd);
        }
        this.paint.stroke();


        // 画 刻度,点,字
        this.paint.lineWidth = 4;
        this.paint.strokeColor = new cc.Color(66, 66, 66, 66);
        for (let i = 0; i < listY.length; i++) {
            this.paint.moveTo(i * xd, 0);
            this.paint.lineTo(i * xd, -10);
            this.paint.stroke();

            this.putPoint(i * xd, (listY[i] - min) * yd, 7)
            if (listX && listX[i]) {
                this.putLabel(i * xd, -40, listX[i], 25);
            }
            else {
                this.putLabel(i * xd, -40, i, 25)
            }

        }

    }

    // xy字
    putLabel(x, y, str, size) {
        let textNode = new cc.Node();
        let text = textNode.addComponent(cc.Label);
        this.node.addChild(textNode);
        text.string = str;
        textNode.x = x
        textNode.y = y;
        textNode.height = size;
        text.fontSize = textNode.height - 3;
        textNode.color = this.xyColor;
    }

    // 画实心点
    putPoint(x, y, r) {
        this.paint.fillColor = this.circleColor;
        this.paint.circle(x, y, r);
        this.paint.fill();
    }

    // update (dt) {}
}
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6