<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>雷达图</title>
<style type="text/css">
body {
background: #efefef;
}
#container {
width: 1012px;
margin: 0 auto;
}
#left {
float: left;
width: 500px;
padding: 0;
margin: 0;
}
#canvas {
border-radius: 10px;
background: #fff;
}
#right {
float: left;
width: 300px;
height: 500px;
margin: 0 0 0 12px;
padding: 0;
}
.output {
display: inline-block;
margin: 0;
width: 100%;
height: 480px;
overflow: auto;
font-family: sans-serif;
font-size: 1em;
line-height: 1.2em;
padding: 10px;
border-radius: 10px;
border: 1px dashed #ccc;
background: #fff;
}
#content {
position: absolute;
opacity: 0.8;
background-color: #464343;
top: 0px;
left: 0px;
border-radius: 10px;
color: #fff;
font-size: 5pt;
width: 170px;
height: 170px;
display: none;
}
p {
line-height: 5px;
padding: 1px;
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<div style="width: 634px; height: 556px; text-align: center; border-radius: 10px; background: #fff;" id="left">
<canvas id="canvas" width="556" height="556"></canvas>
</div>
</div>
<div id="content">
</div>
<script src="js/jquery.js"></script>
<script src="js/control.js"></script>
<script type="text/javascript" src="js/cce.js"></script>
<script type="text/javascript" src="js/event/Event.js"></script>
<script type="text/javascript" src="js/event/EventTarget.js"></script>
<script type="text/javascript" src="js/event/EventManager.js"></script>
<script type="text/javascript" src="js/Container.js"></script>
<script type="text/javascript" src="js/SortArray.js"></script>
<script type="text/javascript" src="js/shape/DisplayObject.js"></script>
<script type="text/javascript" src="js/shape/Rectangle.js"></script>
<script type="text/javascript" src="js/shape/Circle.js"></script>
<script type="text/javascript" src="js/shape/Polygon.js"></script>
<script type="text/javascript" src="js/shape/Lines.js"></script>
<script type="text/javascript" src="js/shape/LinesNoCenter.js"></script>
<script type="text/javascript" src="js/shape/Region.js"></script>
<script type="text/javascript" src="js/shape/SetText.js"></script>
<script type="text/javascript" src="js/shape/RectangleRadius.js"></script>
<script type="text/javascript">
var oDiv = document.getElementById('content');
document.onmousemove = function (even) {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
var oEvent = even || event;
oDiv.style.top = scrollTop + oEvent.clientY + "px";
oDiv.style.left = scrollLeft + oEvent.clientX + "px";
}
var mData = [
{ name: '3室2厅2卫(高层)', xm_max: 77, xm_min: 11, hz: 20, xjl: [40, 58, 56] },
{ name: '4室2厅2卫(高层)', xm_max: 72, xm_min: 22, hz: 55, xjl: [60, 33, 22] },
{ name: '3室2厅2卫(高层)', xm_max: 46, xm_min: 33, hz: 67, xjl: [34, 78, 17] },
{ name: '3室2厅1卫(高层)', xm_max: 50, xm_min: 44, hz: 90, xjl: [79, 34, 89] },
{ name: '2室2厅2卫(洋房)', xm_max: 80, xm_min: 43, hz: 56, xjl: [76, 23, 90] },
{ name: '3室2厅2卫(高层)', xm_max: 60, xm_min: 64, hz: 32, xjl: [23, 68, 11] }]
var mCountBianshu = 10; //圈数
var mCount = mData.length; //边数
var mCenter = 278; //中心点
var mRadius = mCenter - 100; //半径(减去的值用于给绘制的文本留空间)
var mAngle = Math.PI * 2 / mCount; //角度
var mCtx = null;
var mColorPolygon = '#B8B8B8'; //多边形颜色
var mColorLines = '#B8B8B8'; //顶点连线颜色
var mColorText = '#000000';
var RegionsPoints = [];
var RegionsPoints2 = [];
var linPoints = [];
var linTextPoints = [];
var xmpbColor = '#2cceff';
var hzzdhColor = '#6769be';
var xjlColor = '#EEC619';
//点击控制隐藏和显示
var isxjl = true;
var ishzzdh = true;
var isxmpb = true;
var arrXmpb = [{ x: 40, y: 502, width: 24, height: 15, radius: 5 }];
var arrHzzdh = [{ x: 205, y: 502, width: 24, height: 15, radius: 5 }];
var arrXjl = [{ x: 373, y: 502, width: 24, height: 15, radius: 5 }];
var output = document.getElementById('msg');
var canvas = document.getElementById("canvas");
var ctx3 = canvas.getContext('2d');
var container = new cce.Container(canvas);
container.enableMouse();
container.enableClick();
//画10层圈
var Polygon = new cce.Polygon(null, mRadius, mCountBianshu, mColorPolygon, mAngle);
container.addChild(Polygon);
Polygon.draw();
//添加文字
for (var i = 0; i < mData.length; i++) {
var setTxt = new cce.SetText(i, mCenter, mCount, mRadius, mColorLines, mAngle, mData);
container.addChild(setTxt);
setTxt.draw();
}
//文字添加事件
drawBiaoTi();
//画6条顶点连线
var Lines = new cce.Lines(linPoints, mCenter);
container.addChild(Lines);
Lines.draw();
/*项目配比安全区域start*/
//画区域1线条
createRegionPoints("xm_max");
var LinesRegion = new cce.LinesNoCenter(RegionsPoints, xmpbColor);
container.addChild(LinesRegion);
LinesRegion.draw();
//画区域1
createRegionPoints("xm_max");
var Region = new cce.Region(0,RegionsPoints, "rgba(188, 234, 248,0.9)", "#d61d1d");
container.addChild(Region);
Region.draw();
//画区域2线条
createRegionPoints("xm_min");
var LinesRegion2 = new cce.LinesNoCenter(RegionsPoints, xmpbColor);
container.addChild(LinesRegion2);
LinesRegion2.draw();
//画区域2
createRegionPoints2("xm_min");
var Region1 = new cce.Region(1,RegionsPoints, "rgba(255, 255, 255,0.4)", "#fff");
container.addChild(Region1);
Region1.draw();
/*项目配比安全区域end*/
//画货值最大化配比曲线
createRegionPoints("hz");
var LinesHuozhi = new cce.LinesNoCenter(RegionsPoints, hzzdhColor);
container.addChild(LinesHuozhi);
LinesHuozhi.draw();
var LinesHuozhiRegion1 = new cce.Region(0,RegionsPoints, "rgb(255, 255, 255,0.01)", "#fff");
container.addChild(LinesHuozhiRegion1);
LinesHuozhiRegion1.draw();
createRegionPoints2("hz");
var LinesHuozhiRegion2 = new cce.Region(1,RegionsPoints, "rgba(255, 255, 255,0.01)", "#fff");
container.addChild(LinesHuozhiRegion2);
LinesHuozhiRegion2.draw();
//创建多条现金流曲线
crateXjl();
////画现金流回正配曲线
//createRegionPointxjls(0);
//var LinesXainJing = new cce.LinesNoCenter(RegionsPoi
html5 canvas 画雷达图. 实现内部元素的click，mousemove，mouseout事件.
需积分: 48 67 浏览量
2018-12-11
10:39:50
上传
评论 1
收藏 87KB RAR 举报
雷达图v1.5.rar （18个子文件） 
雷达图v1.5 
index.html 14KB js 
Container.js 4KB event EventTarget.js 2KB Event.js 251B EventManager.js 1KB shape LinesNoCenter.js 2KB SetText.js 3KB Polygon.js 3KB DisplayObject.js 634B Circle.js 2KB Lines.js 1KB RectangleRadius.js 3KB Rectangle.js 2KB Region.js 3KB jquery.js 267KB control.js 10KB SortArray.js 3KB cce.js 99B资源评论
胶水代码
- 粉丝: 116
- 资源: 4
最新资源
- SqlServer的over partition by开窗语句
- SqlServer查询语句中的锁
- 【480189个用户】【17770部电影】Netflix电影评分数据集：用于推荐系统分析
- appPermission.js
- FOB,CIF,CNF价格计算器，exe文件
- 《搞懂Docker》系列配套示例程序
- Numpy入门.ipynb
- 11111111111111111111111111111111111111111111111111
- 2010-2020信息系统项目管理师历年真题（含上午题、案例分析、论文）试题和答案.zip
- osgeo4w-setup-x86-64 对应的QGIS3.18的版本QT5.11
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
