zoukankan      html  css  js  c++  java
  • 用canvas画布画柱状图

    <!DOCTYPE html>
    <html> 
        <head>
        <meta charset="utf-8" />
        <title>柱状图</title>
        <style type="text/css">
        canvas {
        border: 1px solid #000;
        }
        </style>
        </head>
        <body>
        <canvas width="800px" height="500px"></canvas>
        <script type="text/javascript">
        var myCanvas = document.querySelector("canvas");
        var ctx = myCanvas.getContext("2d");
        var space= 100;
        //动态获取画布大小
    var canvasW = ctx.canvas.width;
        var canvasH = ctx.canvas.height;
        var yd=30;
        var x0=yd;
        var y0 = Math.floor(canvasH-yd);
        ctx.beginPath();
        ctx,moveTo(x0,y0);
        ctx.lineTo(canvasW-x0,y0);
        ctx.strokeStyle="#eee";
        ctx.stroke();
    
        ctx.beginPath();
        ctx,moveTo(x0,y0);
        ctx.lineTo(x0,yd);
        ctx.strokeStyle="#eee";
        ctx.stroke();
    
        ctx.beginPath();
        for (var i = 0; i < 5; i++) {
        ctx.moveTo(x0, y0-space * i - 0.5);
        ctx.lineTo(canvasW, y0-space * i - 0.5);
        ctx.strokeStyle = "#000";
        ctx.stroke();
        }
    
        for(var i = 0; i < 5; i++) {
        ctx.moveTo(x0-6, y0-space * i - 0.5);
        ctx.lineTo(x0, y0-space * i - 0.5);
        ctx.strokeStyle = "#eee";
        ctx.stroke();
    
        ctx.font="12px 微软雅黑";
    ctx.textAlign="right";
        ctx,textBaseline="middle";
        ctx.fillStyle="#000";
        ctx.fillText(100*i,x0-6,y0-space*i);
        }
    
        var arr=[
        {
        x:"Mon",
        y:10
        },
        {
        x:"Tue",
        y:60 
        },
        {
        x:"Wed",
        y:200 
        },
        {
        x:"Thu",
        y:340 
        },
        {
        x:"Fri",
        y:380 
        },
        {
        x:"Sat",
        y:340 
        },
        {
        x:"Sun",
        y:220 
        }
        ]
        ctx.beginPath();
        ctx.moveTo(x0,y0);
        for(var i=0;i<arr.length;i++){
        ctx.moveTo(x0+space*(i+1),y0);
        ctx.lineTo(x0+space*(i+1),y0+6);
        ctx.strokeStyle="#000";
        ctx.stroke();
    
        ctx.font="16px 微软雅黑";
    ctx.textAlign="center";
        ctx.textBaseline="top";
        ctx.fillStyle="#000";
        ctx.fillText(arr[i].x,x0+space*(i+1),y0+6);
    
        ctx.fillStyle="#6495ed";
        ctx.fillRect(x0+space*(i+1)-30,y0-arr[i].y,60,arr[i].y);
        ctx.textBaseline="top";
        ctx.fillStyle="#6495ed";
        }
        </script>
    </html>
    
     

     

  • 相关阅读:
    负载均衡服务之HAProxy基础入门
    WEB缓存系统之varnish代理以及健康状态检测配置
    WEB缓存系统之varnish缓存项修剪
    WEB缓存系统之varnish状态引擎
    WEB缓存系统之varnish基础入门
    WEB缓存控制机制与varnish简介
    WEB应用之httpd基础入门(五)
    Appium移动端测试--基础预热
    postman接口测试-参数化-测试数据Text文本
    机器学习环境搭建安装TensorFlow1.13.1+Anaconda3.5.3+Python3.7.1+Win10
  • 原文地址:https://www.cnblogs.com/3542446186qq/p/10098597.html
Copyright © 2011-2022 走看看