Html5饼图绘图完☀成统计分析图的方式

日期:2021-03-23 类型:科技新闻 

关键词:小程序开发者工具,小程序在线生成平台,小程序编辑,免费的小程序,微信小程序在哪里

Html5出示了强劲的制图API,要我们可以应用javascript轻轻松松绘图各种各样图型。文中将关键解读应用HTML5绘图饼图(统计分析图)的方式。首先看一下饼图实际效果:

这一图是动态性转化成的,依据传到的占比主要参数(数字能量数组),来动态性绘图饼图。饼图的尺寸也是依据<canvas>高宽比来动态性调节的。

所有编码以下:

<!DOCTYPE html>
<html>
    <head>
        <title>Canvas检测</title>
        <meta charset="UTF-8">
        <script>
            //绘图饼图
            function drawCircle(canvasId, data_arr, color_arr, text_arr)
            {
                var c = document.getElementById(canvasId);
                var ctx = c.getContext("2d");
 
                var radius = c.height / 2 - 20; //半径
                var ox = radius + 20, oy = radius + 20; //圆心
 
                var width = 30, height = 10; //图示宽和高
                var posX = ox * 2 + 20, posY = 30;   //
                var textX = posX + width + 5, textY = posY + 10;
 
                var startAngle = 0; //起止弧度
                var endAngle = 0;   //完毕弧度
                for (var i = 0; i < data_arr.length; i++)
                {
                    //绘图饼图
                    endAngle = endAngle + data_arr[i] * Math.PI * 2; //完毕弧度
                    ctx.fillStyle = color_arr[i];
                    ctx.beginPath();
                    ctx.moveTo(ox, oy); //移动到到圆心
                    ctx.arc(ox, oy, radius, startAngle, endAngle, false);
                    ctx.closePath();
                    ctx.fill();
                    startAngle = endAngle; //设定起止弧度
 
                    //绘图占比图及文本
                    ctx.fillStyle = color_arr[i];
                    ctx.fillRect(posX, posY + 20 * i, width, height);
                    ctx.moveTo(posX, posY + 20 * i);
                    ctx.font = 'bold 12px 微软公司雅黑';    //斜体字 30清晰度 微软公司雅黑字体样式
                    ctx.fillStyle = color_arr[i]; //"#000000";
                    var percent = text_arr[i] + ":" + 100 * data_arr[i] + "%";
                    ctx.fillText(percent, textX, textY + 20 * i);
                }
            }
 
            function init() {
                //绘图饼图
                //占比数据信息和色调
                var data_arr = [0.05, 0.25, 0.6, 0.1];
                var color_arr = ["#00FF21", "#FFAA00", "#00AABB", "#FF4400"];
                var text_arr = ["第一一季度", "第二一季度", "第三一季度", "第四一季度"];
 
                drawCircle("canvas_circle", data_arr, color_arr, text_arr);
            }
 
            //网页页面载入时实行init()涵数
            window.onload = init;
        </script>
    </head>
    <body>
        <h3>HTML5绘图饼图演试</h3>
        <p>
            <canvas id="canvas_circle" width="500" height="300" style="border:2px solid #0026ff;" >
                访问器不兼容canvas
            </canvas>
        </p>
    </body>
</html>

这一涵数能够立即应用,假如想干的更好看,能够提升一些附加的美观大方绘图。

本编码较大的灵便性是将绘图主要参数与绘图编码分离出来,饼图尺寸依据Canvas器皿高宽比全自动调节。传送主要参数方法以下:

var data_arr = [0.05, 0.25, 0.6, 0.1]; //占比数据信息
var color_arr = ["#00FF21", "#FFAA00", "#00AABB", "#FF4400"]; //色调
var text_arr = ["第一一季度", "第二一季度", "第三一季度", "第四一季度"]; //文本
//绘图饼图
drawCircle("canvas_circle", data_arr, color_arr, text_arr);

到此这篇有关Html5饼图绘图完成统计分析图的方式的文章内容就详细介绍到这了,大量有关Html5饼图统计分析图內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!

上一篇:引进css的4种方法总结(共享) 返回下一篇:没有了