Discuss / JavaScript / 不难,但有点烦

不难,但有点烦

Topic source

XNOKIA

#1 Created at ... [Delete] [Delete and Lock User]

哪位兄弟帮我找找bug,颜色不对

    var
        canvas = document.getElementById('stock-canvas'),
        width = canvas.width,
        height = canvas.height,
        ctx = canvas.getContext('2d');
    console.log(JSON.stringify(data[0])); // {"date":"20150602","open":4844.7,"close":4910.53,"high":4911.57,"low":4797.55,"vol":62374809900,"change":1.69}
    ctx.clearRect(0, 0, width, height);
    ctx.fillText('Test Canvas', 10, 10);

//画坐标轴
            var path = new Path2D();
            path.moveTo(0,height);
            path.lineTo(width, height);
            path.moveTo(0,0);
            path.lineTo(0,height);
            ctx.strokeStyle = '#0000ff';
            ctx.stroke(path);

            //画每日行情
            //假定纵坐标最高6000点(A股何时才到6000点?)
            //
            var startX = 10;        //起始的X坐标
            var dayW = 8;          //每日的宽度
            var next = 10;           //两日的间隔
            var top = 3788;            //假设的最高点
            var bottom = 3200;          //假设的最低点

            data.forEach(function(element, index, self){


                //画开盘和收盘的柱状图

                var opY = (1-(element.open-bottom)/(top-bottom))*height;
                var opX = startX;
                var clY = (1-(element.close-bottom)/(top-bottom))*height;
                var dayH = clY-opY;
                ctx.fillStyle = element.change>=0?"red":"green";
                ctx.fillRect(opX,opY,dayW,dayH);

                //画高低点的线

                var hX = startX+dayW/2;
                var hY = (1-(element.high-bottom)/(top-bottom))*height;
                var lY = (1-(element.low-bottom)/(top-bottom))*height;
                path.moveTo(hX,hY);
                path.lineTo(hX,lY);
                ctx.strokeStyle = element.change>=0?"red":"green";
                ctx.lineWidth = 1;
                ctx.stroke(path);

                startX += next;

            });

  • 1

Reply