html5 canvas 画图表

(function () {

    var canvas = document.createElement("canvas");

    canvas.width = 800;

    canvas.height = 400;

    canvas.innerText = "抱歉，你的浏览器不支持canvas T_T";

    document.getElementById('leoncanvas').appendChild(canvas);

    var data = { "aaa": 1000, "bbb": 600, "ccc": 200, "ddd": 400, "eee": 550, "fff": 50, "ggg": 10, "hhh": 280 };

    var yAxisValueStep = 100;

    var width = canvas.width;

    var height = canvas.height;

    // data length calc & value analysis

    var length = 0, min = 0, max = 0;

    for (var i in data) {

        length++;

        if (data[i] < min)

            min = data[i];

        if (data[i] > max)

            max = data[i];

    }

    var xLength = width * 0.9;

    var yLength = height * 0.7;

    var left = width * 0.12;

    var bottom = height * 0.08;

    // origin point

    var x0 = left;

    var y0 = height - bottom;

    var p0 = { x: x0, y: y0 };

    var px = { x: left + xLength, y: p0.y };

    var py = { x: p0.x, y: p0.y - yLength };

    var xScaleMarkWidth = xLength / (length + 3);

    var yScaleMarkWidth = yLength / (length + 3);

    // begin to draw axis

    var context = canvas.getContext('2d');

    context.beginPath();

    // offset 0.5 to draw 1 pixel line

    //http://kilianvalkhof.com/2010/design/the-problem-with-svg-and-canvas/

    // xAxis

    context.moveTo(p0.x + 0.5, p0.y + 0.5);

    context.lineTo(px.x + 0.5, px.y + 0.5);

    // yAxis

    context.moveTo(p0.x + 0.5, p0.y + 0.5);

    context.lineTo(py.x + 0.5, py.y + 0.5);

    context.font = "normal lighter 12px sans-serif";

    // scale marker

    for (var i = 0; i < length + 2; i++) {

        // xaxis

        context.moveTo(p0.x + (i + 1) * xScaleMarkWidth + 0.5, p0.y + 0.5);

        context.lineTo(p0.x + (i + 1) * xScaleMarkWidth + 0.5, p0.y + 2 + 0.5);

        // yaxis

        context.moveTo(p0.x + 0.5, p0.y - (i + 1) * yScaleMarkWidth + 0.5);

        context.lineTo(p0.x + 0.5 - 2, p0.y - (i + 1) * yScaleMarkWidth + 0.5);

    }

    // y axis marker value

    for (var i = 0; i <= length + 2; i++) {

        // yaxis value

        context.fillText(yAxisValueStep * i, p0.x + 0.5 - 30, p0.y - i * yScaleMarkWidth + 3);

    }

    // draw column chart

    var lengthPerValue = (yScaleMarkWidth * (length + 2)) / max;

    var rectX, rectY;

    var i = 0;

    for (var p in data) {

        rectX = p0.x + (i + 1) * xScaleMarkWidth + 0.5 - xScaleMarkWidth * 0.25;

        rectY = p0.y - lengthPerValue * data[p];

        // draw column

        context.fillStyle = "rgba(255,0,0,0.6)";

        context.fillRect(rectX, rectY, xScaleMarkWidth / 2, lengthPerValue * data[p]);

        // add text

        context.fillStyle = 'rgb(0,0,0)';

        // column value

        context.fillText(data[p], rectX, rectY - 15);

        // x value

        context.fillText(p, rectX + xScaleMarkWidth * 0.1, rectY + lengthPerValue * data[p] + 20);

        i++;

    }

    context.lineWidth = 1;

    context.stroke();

    context.closePath();

})();

柱状图效果如下：

(function () {

    var canvas = document.createElement("canvas");

    canvas.width = 800;

    canvas.height = 400;

    canvas.innerText = "抱歉，你的浏览器不支持canvas T_T";

    document.getElementById('leoncanvas1').appendChild(canvas);

    var data = { "aaa": 1000, "bbb": 600, "ccc": 200, "ddd": 400, "eee": 550, "fff": 50, "ggg": 10, "hhh": 280 };

    var yAxisValueStep = 100;

    var width = canvas.width;

    var height = canvas.height;

    // data length calc & value analysis

    var length = 0, min = 0, max = 0;

    for (var i in data) {

        length++;

        if (data[i] < min)

            min = data[i];

        if (data[i] > max)

            max = data[i];

    }

    var xLength = width * 0.9;

    var yLength = height * 0.7;

    var left = width * 0.12;

    var bottom = height * 0.08;

    // origin point

    var x0 = left;

    var y0 = height - bottom;

    var p0 = { x: x0, y: y0 };

    var px = { x: left + xLength, y: p0.y };

    var py = { x: p0.x, y: p0.y - yLength };

    var xScaleMarkWidth = xLength / (length + 3);

    var yScaleMarkWidth = yLength / (length + 3);

    // begin to draw axis

    var context = canvas.getContext('2d');

    context.beginPath();

    // offset 0.5 to draw 1 pixel line

    //http://kilianvalkhof.com/2010/design/the-problem-with-svg-and-canvas/

    // xAxis

    context.moveTo(p0.x + 0.5, p0.y + 0.5);

    context.lineTo(px.x + 0.5, px.y + 0.5);

    // yAxis

    context.moveTo(p0.x + 0.5, p0.y + 0.5);

    context.lineTo(py.x + 0.5, py.y + 0.5);

    // scale marker

    for (var i = 0; i < length + 2; i++) {

        // xaxis

        context.moveTo(p0.x + (i + 1) * xScaleMarkWidth + 0.5, p0.y + 0.5);

        context.lineTo(p0.x + (i + 1) * xScaleMarkWidth + 0.5, p0.y + 2 + 0.5);

        // yaxis

        context.moveTo(p0.x + 0.5, p0.y - (i + 1) * yScaleMarkWidth + 0.5);

        context.lineTo(p0.x + 0.5 - 2, p0.y - (i + 1) * yScaleMarkWidth + 0.5);

    }

    // y axis marker value

    for (var i = 0; i <= length + 2; i++) {

        // yaxis value

        context.fillText(yAxisValueStep * i, p0.x + 0.5 - 30, p0.y - i * yScaleMarkWidth + 3);

    }

    // draw column chart

    var lengthPerValue = (yScaleMarkWidth * (length + 2)) / max;

    //var rectX, rectY;

    var x, y;

    var i = 0;

    context.font = "normal lighter 12px sans-serif";

    // set axis text & marker

    for (var p in data) {

        x = p0.x + (i + 1) * xScaleMarkWidth + 0.5;

        y = p0.y - lengthPerValue * data[p];

        // add text

        context.fillStyle = 'rgb(0,0,0)';

        // point value

        context.fillText(data[p], x, y - 15);

        // x value

        context.fillText(p, x + xScaleMarkWidth * 0.1, y + lengthPerValue * data[p] + 20);

        i++;

    }

    context.stroke();

    context.closePath();

    context.beginPath();

    context.strokeStyle = "rgba(255,0,0,0.8)";

    context.lineCap = "square";

    context.lineJoin = "miter";

    context.lineWidth = 2;

    i = 0;

    for (var p in data) {

        x = p0.x + (i + 1) * xScaleMarkWidth + 0.5;

        y = p0.y - lengthPerValue * data[p];

        if (i == 0) {

            context.moveTo(x, y);

        }

        else {

            context.lineTo(x, y);

        }

        i++;

    }

    context.stroke();

    context.closePath();

})();

折线图效果如下：