图形报表之条形图简易版本

<!DOCTYPE html>
<html lang="en">
<script src="./jquery.min.js"></script>
<script src="./chart.js"></script>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="line"></div>
    <script>
        chart.init({
            width:600,height:400,
            id:'line',unit:'元',
            xAxis: {
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周末']
            },
            series: [{
                data: [13, 42, 31, 22, 56, 78, 12],
                type: 'line'
            }]
        });
    </script>
</body>
</html>

var chart = {
    init:function (options) {
        var canvasId = options.id + '_canvas';
        $('#'+options.id).append('<canvas id="'+canvasId+'" width="'+options.width+'" height="'+options.height+'" style="border:0px solid #000000;"></canvas>');
        var ctx=document.getElementById(canvasId).getContext("2d");
        var partition = chart.getPartition(options.series[0].data);

        //x y 轴
        var start_x = 50.5,start_y = 20.5,end_y = options.height-50.5,end_x=options.width-20;
        ctx.moveTo(start_x,start_y);
        ctx.lineTo(start_x,end_y);
        ctx.lineTo(end_x,end_y);
        ctx.lineWidth = 1;//线条的宽度
        ctx.strokeStyle = "#000000";//线条的颜色
        ctx.stroke();

        //y轴 起始刻度
        ctx.moveTo(start_x,end_y);
        ctx.lineTo(start_x-5,end_y);
        ctx.lineTo(end_x,end_y);
        ctx.lineWidth = 1;//线条的宽度
        ctx.strokeStyle = "#000000";//线条的颜色
        ctx.stroke();
        ctx.fillText("0",start_x-15,end_y+3);

        // y轴 刻度
        for( var i=0 ; i<partition.length ; i++ ){
            var y = start_y+((end_y-start_y)/partition.length)*i;
            y = Math.floor(y)+0.5;

            //往左
            //ctx.beginPath();
            ctx.moveTo(start_x,y);
            ctx.lineTo(start_x-5,y);
            ctx.lineWidth = 1;//线条的宽度
            ctx.strokeStyle = "#000000";//线条的颜色
            ctx.stroke();
            ctx.beginPath();
            //往右

            ctx.moveTo(start_x,y);
            ctx.lineTo(end_x,y);
            ctx.lineWidth = 1;//线条的宽度
            ctx.strokeStyle = "#ADADAD";//线条的颜色
            ctx.stroke();
            ctx.beginPath();

            var scale = partition.topNumber/partition.length*(partition.length-i);
            ctx.fillText(scale+options.unit,start_x-20-(5*( (scale+options.unit).getBytesLength() - 2 )),y+3);
        }

        // x轴 刻度
        var xAxisData = options.xAxis.data;
        var xAvglength = (end_x-start_x)/(xAxisData.length-1);
        for( var i=0 ; i<xAxisData.length ; i++ ){
            var x = start_x+xAvglength*i;
            x = Math.floor(x)+0.5;
            if( i>0 ){
                ctx.moveTo(x,end_y);
                ctx.lineTo(x,end_y+5);
                ctx.lineWidth = 1;//线条的宽度
                ctx.strokeStyle = "#000000";//线条的颜色
                ctx.stroke();
            }

            ctx.font="13px Arial";
            ctx.fillText(xAxisData[i],x-10,end_y+20);
        }

        //数据
        //y轴刻度比例
        var seriesData = options.series[0].data;
        var yscale = (end_y-start_y)/partition.topNumber;
        var points = [];
        ctx.beginPath();
        for( var i=0 ; i<seriesData.length ; i++ ){
            var y = end_y - yscale * seriesData[i];
            if( i==0 ){
                ctx.moveTo(start_x,y);
                points.push({x:start_x,y:y});
            }else{
                ctx.lineTo(start_x+xAvglength*i,y);
                points.push({x:start_x+xAvglength*i,y:y});
            }
        }
        ctx.lineWidth = 2;//线条的宽度
        ctx.strokeStyle = "#B22222";//线条的颜色
        ctx.stroke();

        for( var i=0 ; i<points.length ; i++ ){
            ctx.beginPath();
            ctx.fillStyle="#B22222";
            ctx.arc(points[i].x,points[i].y,3,0,2*Math.PI);
            ctx.fill();
        }
    },
    getPartition:function (data) {
        // max length = 7    min length = 4
        var max = Math.max.apply(null,data);
        var topNumber,length;
        var multiple = 10;
        if( max > 1000 ){
            multiple = Math.pow(10,((max+'').length - 2 ));
        }
        for (var i=1 ; true ; i++){
            topNumber = (max - max % multiple + multiple * i);
            length = partitionLength(topNumber);
            if(length>0)break;
        }
        return {topNumber:topNumber,length:length};
    }
};

function partitionLength(topNumber) {
    for(var j=7 ; j>3 ; j--){
        if( topNumber%j==0){
            return j;
        }
    }
    return -1;
}

String.prototype.getBytesLength = function() {
    var totalLength = 0;
    var charCode;
    for (var i = 0; i < this.length; i++) {
        charCode = this.charCodeAt(i);
        if (charCode < 0x007f)  {
            totalLength++;
        } else if ((0x0080 <= charCode) && (charCode <= 0x07ff))  {
            totalLength += 2;
        } else if ((0x0800 <= charCode) && (charCode <= 0xffff))  {
            totalLength += 3;
        } else{
            totalLength += 4;
        }
    }
    return totalLength;
}

图形报表之条形图简易版本

猜你喜欢