canvas数据可视化 1.0

最新推荐文章于 2023-06-09 23:06:00 发布

GinaV

最新推荐文章于 2023-06-09 23:06:00 发布

阅读量618

点赞数 1

分类专栏： JQuery ， Js html 文章标签： canvas 绘图前端

html 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

JQuery ， Js

6 篇文章 0 订阅

订阅专栏

第一次学习canvas，记录一下学习内容：

实现json数据的用图表的形式展示，知识点：html5\canvas

【Canvas 通过 JavaScript 来绘制 2D图形】

<html>
    <head>
    <meta charset="UTF-8"/>
        <title>可视化</title>
    </head>
    <body>
        <canvas id="canvas" width="600" height="400" style="border:1px solid #ccc;"></canvas>
    </body>
</html>
<script>
    var canvas =document.querySelector("#canvas");
    var ctx = canvas.getContext("2d");
    var PieChart = function(ctx){
        this.ctx=ctx|| document.querySelector("#canvas").getContext("2d");
        this.w=this.ctx.canvas.width;// 宽高
        this.h=this.ctx.canvas.height;
        this.x0=this.w/2+60; //圆心
        this.y0=this.h/2;
        this.radius=150; //圆角
    }
    PieChart.prototype.init=function(data){
        /*数据准备工作*/
        this.drawPie(data);
    };
    PieChart.prototype.drawPie=function(data){
        var that=this;
        var anglelist= that.transformAngle(data);
        var startAnagele=0;
        anglelist.forEach(function(item,i){
            var endAngle=startAnagele+item.angle;
            that.ctx.beginPath();
            that.ctx.moveTo(that.x0,that.y0);
            that.ctx.arc(that.x0,that.y0,that.radius,startAnagele,endAngle);
            that.ctx.fillStyle= that.gentRandomColor();//给一个随机色
            that.ctx.fill();
            startAnagele=endAngle;//上一个起始角=下一个的结束角
        })
    };
    PieChart.prototype.gentRandomColor=function(data){
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);

        return  'rgb('+ r+','+ g+','+ b +')';
    };
    PieChart.prototype.transformAngle=function(data){
        var total=0
        data.forEach(function(item,i){
            total+=item.num;//总数
        });
        data.forEach(function(item,i){
            var angle=item.num/total * Math.PI * 2;
            item.angle=angle;
        })
        return data;
    };

    //数据
    var data=[
        {
            title:"15-20岁",
            num:6
        },{
            title:"20-25岁",
            num:30
        },{
            title:"25-30岁",
            num:15
        },{
            title:"30岁以上",
            num:99
        }
    ]
    console.log(data);
    var pieChart=new PieChart();
    pieChart.init(data);
</script>

GinaV

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
canvas数据可视化 1.0

第一次学习canvas，记录一下学习内容：实现json数据的用图表的形式展示，知识点：html5\canvas【Canvas 通过 JavaScript 来绘制 2D图形】<html> <head> <meta charset="UTF-8"/> <title>可视化</title> ...
复制链接

扫一扫