SVG绘制随机的柱形图+php
<!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的更多相关文章
- 18个超有趣的SVG绘制动画赏析
SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了18个非 ...
- SVG绘制多个圆
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用SVG绘制湖南地图
项目中有需求使用SVG绘制湖南地图,现把自己制作过程写一下供大家参考. 1.首先准备一张湖南地图(仅有各市边界线即可).(图片最好是PNG的,除了地图其它什么也没有) 2.准备SVG编辑工具SVGDe ...
- SVG Drawing Animation - SVG 绘制动画
一个小实验,探索 SVG 线图动画的使用情况,以前沿的展示形式呈现图形或网站元素的外观,模拟它们的加载.SVG 真的很强大,有许多创造性和可能性,使用 SVG 可以制作各种有趣的网站交互效果.今天这篇 ...
- html 5新特性 --用SVG绘制的微信logo
一个简单的SVG绘制图片的小案例. 效果图: 代码如下: <style> * { ; ; } body { background-color: #d5d3d4; } .container ...
- SVG绘制圆形简单示例分享
今天分享“svg绘制圆形”部分 1.简单圆形 效果图如下: 关键代码: <svg xmlns="http://www.w3.org/2000/svg" version=&qu ...
- 【重点突破】——Canvas技术绘制随机改变的验证码
一.引言 本文主要是我在学习Canvas技术绘图时的一个小练习,绘制随机改变的验证码图片,虽然真正的项目里不这么做,但这个练习是一个掌握Canvas技术很好的综合练习.(真正的项目中验证码图片使用服务 ...
- canvas绘制随机验证码
效果图: 思路: 1, 绘制canvas画布,进行基础设置 2.绘制一个矩形 3.设置验证码的随机数 4.设置验证码随机数的随机颜色 5.绘制随机干扰线 6,绘制随机干扰点 经过以上六个步骤,验证码的 ...
- svg绘制一个简单地饼图
一个简单地svg绘制饼图的demo,代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...
随机推荐
- Java数据结构之稀疏数组（Sparse Array）
1.需求 编写的五子棋程序中,有存盘退出和续上盘的功能.因为该二维数组的很多值是默认值0,因此记录了很多没有意义的数据,为了压缩存储所以采用稀疏数组. 2.基本介绍 当一个数组中大部分元素为0,或者为 ...
- Linux 与 Unix 到底有啥区别和联系？
原文:https://opensource.com/article/18/5/differences-between-linux-and-unix 来源:开源中国社区,译者:Tocy, LinuxTe ...
- 移动端自动化测试之Appium的工作原理学习
Appium 简介 参考官网文档说明:http://appium.io/docs/en/about-appium/intro/ Appium官方文档上介绍,Appium 是一个自动化测试的开源工具,支 ...
- Dijkstra经典算法注意点
Dijkstra经典算法注意点 前言 迪杰斯特拉算法,经典模板如下: void dij(int s) { for(int i=1; i<=n; i++) dis[i]=road[s][i]; v ...
- [luogu4768] [NOI2018] 归程 (Dijkstra+Kruskal重构树)
[luogu4768] [NOI2018] 归程 (Dijkstra+Kruskal重构树) 题面 题面较长,这里就不贴了 分析 看到不能经过有积水的边,即不能经过边权小于一定值的边,我们想到了kru ...
- Codeforces 1042C (贪心+模拟)
题面 传送门 分析 思路简单,但代码较复杂的贪心 分类讨论: 有0 负数有奇数个:将绝对值最小(实际最大)的负数和0全部乘到一起,最后删掉0 负数有偶数个:将0全部乘到一起,最后删掉0 没有0 负数有 ...
- 牛客练习赛51 C 勾股定理https://ac.nowcoder.com/acm/contest/1083/C
题目描述 给出直角三角形其中一条边的长度n,你的任务是构造剩下的两条边,使这三条边能构成一个直角三角形. 输入描述: 一个整数n. 输出描述: 另外两条边b,c.答案不唯一,只要输出任意一组即为合理, ...
- java实战应用：MyBatis实现单表的增删改
MyBatis 是支持普通 SQL查询.存储过程和高级映射的优秀持久层框架.MyBatis 消除了差点儿全部的JDBC代码和參数的手工设置以及结果集的检索.MyBatis 使用简单的 XML或注解用于 ...
- Linux安装软件-CentOS和Ubuntu介绍
开发十年,就只剩下这套架构体系了! >>> 不同Linux发行版的软件安装会有不同的方式,其中CentOS安装软件的主要方式是rpm和yum,Ubuntu可以使用apt-get, ...
- Nodejs 学习笔记 --- 安装与环境配置
一.安装Node.js步骤 1.下载对应自己系统对应的 Node.js 版本,地址:https://nodejs.org/zh-cn/ 2.选安装目录进行安装 3.环境配置 ...