• 今天写动态canvas柱状图小结


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    #main{
    margin-top:100px;
    text-align: center;
    }
    #c1{
    background: pink;
    }
    </style>
    </head>
    <body>
    <div id="main">
    <canvas ID="c1" width="600" height="600"></canvas>

    </div>
    <script src="jquery-1.11.3.js"></script>
    <script>
    var ctx=c1.getContext("2d");

    var arr=[0,0,0,0,0,0];
    $.ajax(
    {
    type:'get',
    url:"1.php",
    success:function(result){
    console.log(typeof result);
    result= JSON.parse(result);
    console.log(result);
    ctx.font="20px SimHei";

    var timer=setInterval( function(){
    paint(result,0);
    paint(result,1);
    paint(result,2);
    paint(result,3);
    paint(result,4);
    paint(result,5);

    },41);



    },
    error:function(){
    console.log("失败");
    }
    }
    );

    function paint(result,i){

    var g=ctx.createLinearGradient(0,0,600,600);
    g.addColorStop(0,"#f00");
    g.addColorStop(0.5,"#ff0");
    g.addColorStop(1,"#83ED4D");
    ctx.fillStyle=g;
    arr[i]+=10;因为要在一个定时器同时画6个柱状图,每次定时器还要保存上一次的数据因此用一个数组来存放6各数据
    if(arr[i]>result[i].value)
    {
    arr[i]=result[i].value;
    }
    ctx.fillRect(60*(i+1),570-arr[i],20,arr[i]);

    ctx.fillStyle='#000';
    var xtext=60*(i+1)-ctx.measureText(result[i].label).width/2+8;
    ctx.fillText(result[i].label,xtext,590);
    }
    </script>
    </body>
    </html>




    1.php


    <?php
    /**
    * Created by PhpStorm.
    * User: Administrator
    * Date: 2016/12/10
    * Time: 9:22
    */
    header("Content-Type:application/json");



    $arr='[
    {"label": "部门1", "value":300},
    {"label": "部门2", "value":500},
    {"label": "部门3", "value":150},
    {"label": "部门4", "value":400},
    {"label": "部门5", "value":550},
    {"label": "部门6", "value":250}
    ]';
    echo json_encode($arr);
  • 相关阅读:
    React生命周期, 兄弟组件之间通信
    React组件式编程Demo-用户的增删改查
    React之this.refs, 实现数据双向绑定
    CCF CSP 201812-4 数据中心
    CCF CSP 201812-4 数据中心
    PAT 顶级 1020 Delete At Most Two Characters (35 分)
    PAT 顶级 1020 Delete At Most Two Characters (35 分)
    Codeforces 1245C Constanze's Machine
    Codeforces 1245C Constanze's Machine
    CCF CSP 201712-4 行车路线
  • 原文地址:https://www.cnblogs.com/hduhdc/p/6155373.html
Copyright © 2020-2023  润新知