canvas绘制折线图

最新推荐文章于 2022-02-13 17:40:18 发布

转载最新推荐文章于 2022-02-13 17:40:18 发布 · 160 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dhygzh/p/4815252.html

本文介绍了一种使用HTML5 Canvas和JavaScript实现的随机折线图绘制方法，通过动态生成的数据点，绘制出折线图，并提供了重新绘制按钮，每次点击都会生成新的随机数据并更新图表。文章展示了完整的代码实现，包括数据生成、图表绘制、样式设置和事件监听等关键步骤。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
    <canvas id="ca" width="300" height="300"></canvas>
　　<br>随机绘制折线图按钮:
    <button id="btn">重新绘制</button>
    <script>
        var uriage = [80, 92, 104, 110, 68, 50, 45, 90, 74, 68, 98, 103];

        window.onload = function(){
            drawChart(shuffle(uriage));
        }
        _$('btn').addEventListener('click', function(){
            drawChart(shuffle(uriage));
        }, false);

        function drawChart(data){
            var a_canvas = _$('ca');
            var ctx = a_canvas.getContext('2d');

            var gradient = ctx.createLinearGradient(0, 0, 0, 300);
            gradient.addColorStop(0, '#e0e0e0');
            gradient.addColorStop(1, '#ffffff');
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, a_canvas.width, a_canvas.height);

            var grid_cols = data.length + 1;
            var grid_rows = 4;
            var cell_width = a_canvas.width / grid_cols;
            var cell_height = a_canvas.height / grid_rows;

            ctx.beginPath();
            for(var row = 0; row <= grid_rows; row++){
                var y = row * cell_height;
                ctx.moveTo(0, y);
                ctx.lineTo(a_canvas.width, y);
            }
            for(var col = 0; col <= grid_cols; col++){
                var x = col * cell_width;
                ctx.moveTo(x, 0);
                ctx.lineTo(x, a_canvas.height);
            }
            ctx.lineWidth = 1;
            ctx.strokeStyle = '#c0c0c0';
            ctx.stroke();

            var max_v = 0;

            for(var i = 0; i < data.length; i++){
                if(data[i] > max_v) max_v = data[i];
            }

            max_v = max_v * 1.1;
            var points = [];
            for(var i = 0; i < data.length; i++){
                var v = data[i];
                var px = cell_width * (i + 1);
                var py = a_canvas.height - a_canvas.height * (v / max_v);
                points.push({
                    'x': px,
                    'y': py
                });
            }

            for(var i = 0; i < points.length; i++){
                ctx.beginPath();
                ctx.arc(points[i]['x'], points[i]['y'], 2, 0, 2*Math.PI);
                ctx.fillStyle = '#00ff00'
                ctx.fill();
            }

            ctx.beginPath();
            ctx.moveTo(points[0]['x'], points[0]['y']);
            for(var i = 0; i < points.length; i++){
                ctx.lineTo(points[i]['x'], points[i]['y']);
                ctx.lineWidth = 2;
                ctx.strokeStyle = '#ee0000';
                ctx.stroke();
            }            
        }

        function shuffle(arr){
            if(Object.prototype.toString.call(arr) !== '[object Array]') return;

            var len = arr.length - 1,
                index = null;
            while(len > 0){
                index = Math.floor(len * Math.random());
                arr[len] = [ arr[index], arr[index]=arr[len] ][0];
                len--;
            }
            return arr;
        }

        function _$(anchor){
            if(typeof anchor !== 'string') return;
            return document.getElementById(anchor);
        }
    </script>
</body>
</html>