<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body{

            text-align: center;

        }

        svg{

            background: #ddd;

        }

    </style>

</head>

<body>

<svg id="s3" width="500" height="400"></svg>

<script src="data/jquery-3.2.1.js"></script>

<script>

    $.ajax({

        type:"GET",

        url:"data/07_saledata.php",

        success:function(data){

            console.log(data);

            for(var i = 0;i<data.length;i++){

                var dept = data[i];

                var rect = document.createElementNS("http://www.w3.org/2000/svg",'rect');

                rect.setAttribute("width",50);

                rect.setAttribute("height",dept.value);

                rect.setAttribute("x",100*i);

                rect.setAttribute('fill', rc(0,256));//填充色

                rect.setAttribute("y",400-dept.value);

                s3.appendChild(rect);

            }

        },

        error:function(){

            alert("您的网络出现故障，请检查!");

        }

    })

    function rn(min, max) {

        return Math.floor(Math.random() * (max - min) + min);

    }

    //random color，返回指定范围内的随机颜色

    function rc(min, max) {

        var r = rn(min, max);

        var g = rn(min, max);

        var b = rn(min, max);

        return `rgb(${r}, ${g}, ${b})`;

    }

</script>

</body>

</html>
<?php

    header("Content-Type:application/json;charset=utf-8");

    $rows = [];

    /*

    $rows=[

            ["月份"=>"一月","value"=>280],

            ["月份"=>"二月","value"=>270],

            ["月份"=>"三月","value"=>380],

            ["月份"=>"四月","value"=>280],

            ["月份"=>"五月","value"=>280],

            ["月份"=>"六月","value"=>210],

            ["月份"=>"七月","value"=>180],

            ["月份"=>"八月","value"=>280],

            ["月份"=>"九月","value"=>200],

            ["月份"=>"十月","value"=>280],

            ["月份"=>"十一月","value"=>300],

            ["月份"=>"十二月","value"=>300]

    ];

    */

    $rows[]=["月份"=>"1月","value"=>160];

    $rows[]=["月份"=>"2月","value"=>290];

    $rows[]=["月份"=>"3月","value"=>220];

    $rows[]=["月份"=>"4月","value"=>100];

    echo json_encode($rows);

?>

***********记得添加jquery-3.2.1.js哦

SVG绘制随机的柱形图+php的更多相关文章

  1. 18个超有趣的SVG绘制动画赏析

    SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了18个非 ...

  2. SVG绘制多个圆

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 使用SVG绘制湖南地图

    项目中有需求使用SVG绘制湖南地图,现把自己制作过程写一下供大家参考. 1.首先准备一张湖南地图(仅有各市边界线即可).(图片最好是PNG的,除了地图其它什么也没有) 2.准备SVG编辑工具SVGDe ...

  4. SVG Drawing Animation - SVG 绘制动画

    一个小实验,探索 SVG 线图动画的使用情况,以前沿的展示形式呈现图形或网站元素的外观,模拟它们的加载.SVG 真的很强大,有许多创造性和可能性,使用 SVG 可以制作各种有趣的网站交互效果.今天这篇 ...

  5. html 5新特性 --用SVG绘制的微信logo

    一个简单的SVG绘制图片的小案例. 效果图: 代码如下: <style> * { ; ; } body { background-color: #d5d3d4; } .container ...

  6. SVG绘制圆形简单示例分享

    今天分享“svg绘制圆形”部分 1.简单圆形 效果图如下: 关键代码: <svg xmlns="http://www.w3.org/2000/svg" version=&qu ...

  7. 【重点突破】——Canvas技术绘制随机改变的验证码

    一.引言 本文主要是我在学习Canvas技术绘图时的一个小练习,绘制随机改变的验证码图片,虽然真正的项目里不这么做,但这个练习是一个掌握Canvas技术很好的综合练习.(真正的项目中验证码图片使用服务 ...

  8. canvas绘制随机验证码

    效果图: 思路: 1, 绘制canvas画布,进行基础设置 2.绘制一个矩形 3.设置验证码的随机数 4.设置验证码随机数的随机颜色 5.绘制随机干扰线 6,绘制随机干扰点 经过以上六个步骤,验证码的 ...

  9. svg绘制一个简单地饼图

    一个简单地svg绘制饼图的demo,代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

随机推荐

  1. 小白学Python（10）——pyecharts 绘制仪表图 Gauge

    from pyecharts import options as opts from pyecharts.charts import Gauge, Page gauge=( Gauge() .add( ...

  2. Python3之Django Web框架中间件？？？

    主要用来处理页面的登录验验.跨站请求伪造防御.日志记录.session设置,权限管理等

  3. Python pass是空语句用法

    在条件判断,还是函数中,有时候不需要输出任何东西,也不能留空,python提供空的语句,下面讲述pass空语句的用法 1,关键词 pass 2,用法 for letter in 'Python': i ...

  4. 《Cascaded Pyramid Network for Multi-Person Pose Estimation》论文阅读及复现笔记

    一.PipeLine 要点 TopDown + GlobalNet + RefineNet 二.Motivation 通过提高对难以识别的关键点的识别准确率,来提升总体识别准确率. 方法:1.refi ...

  5. jquery遍历table中每个td的值

    废话不说直接上: <table style="border:1px solid #ccc">        <tr>            <td&g ...

  6. JavaScript、ES6中的类的继承

    类的继承 extends  connstructor  super 例1: class Father { constructor(){} money(){ console.log("1000 ...

  7. C# ASP.NET发送电子邮件System.Net.Mail

    1.补充知识 (1)POP3和SMTP服务器是什么? 简单点来说:POP3 用于接收电子邮件 ,SMTP 用于发送电子邮件. (1)POP3具体指什么? POP3(Post Office Protoc ...

  8. 2018-12-25-win10-uwp-显示SVG

    title author date CreateTime categories win10 uwp 显示SVG lindexi 2018-12-25 10:37:5 +0800 2018-2-13 1 ...

  9. 211-基于FMC的ADC-DAC子卡

    基于FMC的ADC-DAC子卡 一.板卡概述 FMC-1AD-1DA-1SYNC是我司自主研发的一款1路1G AD采集.1路2.5G DA回放的FMC.1路AD同步信号子卡.板卡采用标准FMC子卡架构 ...

  10. Email常用缩写

    Abbreviations Used in email Abbreviation Meanings ATM at the moment AFAIK as far as I know BTW by th ...