javascript canvas畫訂單

  前段時間看了某個平臺的後臺，發現訂單顯示使用的canvas進行繪畫，直觀，明瞭的表達出了訂單的走勢如下

所以自己心癢癢的，就自己模仿了一個-->貼上代碼

 <style>
        #canvasmain{position: relative;width: 1000px;height: 500px;}
        #canvas{position: absolute;top: 0;left: 0;}
        #canvassub{position: absolute}
        #tip{position: absolute;min-width: 50px;max-width: 70px;background-color: rgba(0, 0, 0, 0.77);color: #fff;text-align: center;border-radius: 6px;-webkit-border-radius: 6px;-moz-border-radius: 6px;pointer-events: none;}
        #a,#b{cursor:pointer;}
    </style>
    <div id="canvasmain">
        <canvas id="canvas">
            你的瀏覽器居然不支持Canvas？！趕快換一個吧！！
        </canvas>
        <canvas id="canvassub"></canvas>
        <div id="tip"></div>
    </div>
    
    <div>
        <p id="line">折線圖</p>
        <p id="bar">條形圖</p>
    </div>
    <script>
        function createCanvas() {
            var canvas = document.getElementById("canvas");
            canvas.width = 1000;
            canvas.height = 500;
            var context = canvas.getContext("2d");
            if (!canvas.getContext)
                return;

            this.json = [
                { key: 1, "number": 0 },
                { key: 2, "number": 14 },
                { key: 3, "number": 25 },
                { key: 4, "number": 1 },
                { key: 5, "number": 98 },
                { key: 6, "number": 11 },
                { key: 7, "number": 21 },
                { key: 8, "number": 32 },
                { key: 9, "number": 23 },
                { key: 10, "number": 36 },
                { key: 11, "number": 1 },
                { key: 12, "number": 52 },
                { key: 13, "number": 65 },
                { key: 14, "number": 45 },
                { key: 15, "number": 86 },
                { key: 16, "number": 10 },
                { key: 17, "number": 45 },
                { key: 18, "number": 54 },
                { key: 19, "number": 35 },
                { key: 20, "number": 10 },
                { key: 21, "number": 64 },
                { key: 22, "number": 45 },
                { key: 23, "number": 35 },
                { key: 24, "number": 23 },
                { key: 25, "number": 24 },
                { key: 26, "number": 10 },
                { key: 27, "number": 43 },
                { key: 28, "number": 66 },
                { key: 29, "number": 25 },
                { key: 30, "number": 44 },
                { key: 31, "number": 100 }
            ];

            this.arrnumber = []; 
            this.maxnumber = 0; 
            this.wframe = 100; 
            this.hframe = 50; 
            this.wlocation = canvas.width - 100; 
            this.hlocation = canvas.height - 100; 
            this.wlocationAverage = this.wlocation / this.json.length; 


            this.moduleArrNumber = function (type) { 
                for (var i = 0, j = this.json.length; i < j; i++) {
                    this.arrnumber.push(this.json[i].number);
                }
                if (type === 'max')
                    return Math.max.apply(null, this.arrnumber);
                else
                    return Math.min.apply(null, this.arrnumber);
            }
            this.type = 'line'; 

            var canvassub = document.getElementById("canvassub"); 
            canvassub.width = this.wlocation;
            canvassub.height = this.hlocation;
            var contextsub = canvassub.getContext("2d");
            canvassub.style.top = this.hframe + "px";
            canvassub.style.left = this.wframe + "px";

            if (typeof this.moduleCanvas != 'function') {
                createCanvas.prototype.moduleCanvas = function () {
                    context.fillStyle = "black";
                    context.font = "30px Arial";
                    context.textAlign = "left";
                    context.textBaseline = "alphabetic";
                    context.fillText("9月份訂單", 10, 30);
                    context.strokeStyle = '#9D9D9D';
                    context.lineWidth = 1;
                    context.font = "italic small-caps bold 14px Arial";
                    for (var i = 0; (k = i * (this.hlocation / 10)) <= this.hlocation; i++) {
                        this.moduleArrNumber('max') > 10 ? (this.moduleArrNumber('max') > 100 ? (this.moduleArrNumber('max') > 1000 ? (this.moduleArrNumber('max') > 1000 ? this.maxnumber = 10000 : this.maxnumber = 1000) : this.maxnumber = 100) : this.maxnumber = 10) : this.maxnumber = 1;
                        context.beginPath();
                        context.moveTo(this.wframe, k + this.hframe);
                        context.lineTo(this.wlocation + this.wframe, k + this.hframe);
                        context.stroke();
                        context.textBaseline = "middle";
                        context.fillText((10 - i) * this.maxnumber, this.wframe - 50, k + this.hframe);
                    }
                    for (var j = 0; (k = j * ((this.wlocation - 1) / this.json.length)) <= this.wlocation; j++) {
                        context.beginPath();
                        context.moveTo(k + this.wframe, this.hframe);
                        context.lineTo(k + this.wframe, this.hlocation + this.hframe);
                        context.stroke();
                        if (this.json.length > j)
                            context.textAlign = "center",context.fillText(this.json[j].key, k + (this.wlocationAverage / 2 + this.wframe), this.hlocation + this.hframe + 40);
                    }
                }
            }

            if (typeof this.lineChart != 'function') {
                createCanvas.prototype.lineChart = function () {
                    this.type = 'line';
                    context.strokeStyle = 'red';
                    context.lineWidth = 2;
                    var tenmaxnumber = this.maxnumber * 10;
                    for (var i = 0; i < this.json.length; i++) {
                        context.beginPath();
                        context.moveTo(i * this.wlocationAverage + (this.wlocationAverage / 2 + this.wframe), (1 - (this.json[i].number / tenmaxnumber)) * this.hlocation + this.hframe);
                        if (this.json.length > i + 1)
                            context.lineTo((i + 1) * this.wlocationAverage + (this.wlocationAverage / 2 + this.wframe), (1 - (this.json[i + 1].number / tenmaxnumber)) * this.hlocation + this.hframe);
                        context.stroke();

                        context.fillStyle = 'black';
                        context.textAlign = "center";
                        context.fillText(this.json[i].number, i * this.wlocationAverage + (this.wlocationAverage / 2 + this.wframe), (1 -