html5柱状图示例

最新推荐文章于 2024-03-04 10:03:05 发布

禺垣

最新推荐文章于 2024-03-04 10:03:05 发布

阅读量686

点赞数

分类专栏： Java Web 学习笔记文章标签： html5 javascript 前端

本文链接：https://blog.csdn.net/Albert201605/article/details/121139097

版权

Java Web 学习笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<canvas id="canvas1" width="1000" height="300"></canvas>
<script>
    (function () {
        window.addEventListener("load", func1(),func2(), false);
    })();
    
    function func1() {
        var data = [21.2, 22.3, 23.1, 9.4, 20.0, 19.8, 19.9];
        var lateral = ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"];

        //获取上下文
        var canvas = document.getElementById("canvas1");
        var context = canvas.getContext("2d");

        //绘制背景
        var gradient = context.createLinearGradient(0, 0, 0, 300);
        context.fillStyle = gradient;
        context.fillRect(0, 0, canvas.width, canvas.height);
        var real_height = canvas.height-15;
        var real_width = canvas.width-40;

        //描绘边框
        var grid_cols = data.length+1;
        var cell_width = real_width/grid_cols;
        context.lineWidth = 1;
        context.strokeStyle = "#a0a0a0";

        // 结束边框描绘
        context.beginPath();

        //画横线
        context.moveTo(0,real_height); //起点
        context.lineTo(real_width,real_height); //终点
        context.lineWidth = 2;
        context.strokeStyle = "black";
        context.stroke();

        //画竖线
        context.moveTo(0,20); //起点
        context.lineTo(0,real_height); //终点
        context.lineWidth = 2;
        context.strokeStyle = "black";
        context.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 = real_height - real_height*(v / max_v);
            points.push({"x":px,"y":py});
        }

        //绘制坐标图形
        for(var i in points){
            var p = points[i];
            context.beginPath();
            if(data[i]<10){ //低于10为黄色
                context.fillStyle="#FFD306";
            }else{
                context.fillStyle="blue";
            }
            context.fillRect(p.x,p.y,15,real_height-p.y);
            context.fill();
        }

        //添加文字
        for(var i in points)
        {
            context.fillStyle="black";
            var p = points[i];
            context.fillText(data[i], p.x, p.y - 5);
            context.fillText(lateral[i],p.x + 1,real_height+12);
        }
        context.fillText('星期',real_width,real_height+12);
        context.fillText('气温',0,10);
    }
    
    function func2() {
        var canvas = document.getElementById("canvas1");
        var context = canvas.getContext("2d");
        context.fillText('html5柱状图示例',500,10);
    }
</script>
</html>

在这里插入图片描述

参考：https://www.cnblogs.com/shuniuniu/p/5318666.html

禺垣

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
html5柱状图示例

<!DOCTYPE html><html lang="en"><canvas id="canvas1" width="1000" height="300"></canvas><script> (function () { window.addEventListener("load", func1(),func2(), false); })(); function func1() {
复制链接

扫一扫