skyline应用-BS绘制饼状图

这个有现成的代码,把代码做一个简要的说明,具体实现效果,是在TE的地图画一个饼状图。

<script type="text/javascript">

function createpie() {

//设置简单参数,包括半径等参数

var sum = 0;

var radius = 100;

var angle = 0;

var i;

//根据饼状图的分块,设置不同的颜色

var color = [0x0000a0, 0x00ff60, 0x8000a0, 0xa0ff00, 0xff00ff, 0xff2000, 0x20c080, 0x402020, 0x8020a0, 0xff6060, 0xc0ffff, 0xff6060, 0x800040, 0xa00020];

for (i = 1; i < 10; i++) {

sum += i;

}

//选择中心的位置,也可以自定义进行设置

var cenpoint = SGWorld.Window.CenterPixelToWorld(0);

var cpoint = cenpoint.Position;

var sx = SGWorld.CoordServices.MoveCoord(cpoint.X, cpoint.Y, radius, 0).X;

var sy = SGWorld.CoordServices.MoveCoord(cpoint.X, cpoint.Y, radius, 0).Y;

//根据每块的比例,设置旋转的角度,在polygon添加点

for (i = 1; i < 10; i++) {

var color1 = color[i];

var langle = angle + parseFloat(i) / parseFloat(sum) * 360;

var east = radius * Math.cos(2 * Math.PI * langle / 360);

var north = radius * Math.sin(2 * Math.PI * langle / 360);

var movcod = SGWorld.CoordServices.MoveCoord(cpoint.X, cpoint.Y, east, north);

var polygon = "POLYGON((" + cpoint.X.toString() + " " + cpoint.Y.toString() + "," + sx.toString() + " " + sy.toString();

var spl = (langle - angle) / 2;

for (var j = 0; j < spl; j++) {

var sinint = Math.sin((angle + j * 2) * Math.PI / 180) * radius;

var cosint = Math.cos((angle + j * 2) * Math.PI / 180) * radius;

var movcodspl = SGWorld.CoordServices.MoveCoord(cpoint.X, cpoint.Y, cosint, sinint);

polygon += "," + movcodspl.X.toString() + " " + movcodspl.Y.toString();

}

polygon += "," + movcod.X.toString() + " " + movcod.Y.toString() + "," + cpoint.X.toString() + " " + cpoint.Y.toString() + "))";

var igeometry = SGWorld.Creator.GeometryCreator.CreateGeometryFromWKT(polygon);

//根据点创建polygon

var ipolygon = SGWorld.Creator.CreatePolygon(igeometry, color1, color1, 0, 0, "polygon");

ipolygon.FillStyle.Color.SetAlpha(0.5);

sx = movcod.X;

sy = movcod.Y;

angle = langle;

}

}

时间: 2024-10-10 03:56:30

skyline应用-BS绘制饼状图的相关文章

canvas绘制饼状图

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>06绘制饼状图</title> </head> <body> <canvas id="canvas"> 抱歉,您的浏览器不支持Canvas.请升级您的浏览器! </canvas> <s

第166天:canvas绘制饼状图动画

canvas绘制饼状图动画 1.HTML 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 6

绘制饼状图

1 import matplotlib.pyplot as plt 2 import numpy as np 3 #准备女生的人数及比例 4 man = 71351 5 women = 68187 6 man_perc = man/(women+man) 7 women_perc = women/(women+man) 8 #添加名称 9 labels = ['男','女'] 10 #添加颜色 11 colors = ['blue','red'] 12 #绘制饼状图 pie 13 paches,

canvas动态绘制饼状图,

当我们使用Echrts很Highcharts的时候,总是觉得各种统计图表是多么神奇,今天我就用现代浏览器支持的canvas来绘制饼状统计图,当然仅仅是画出图并没什么难度,但是统计图一般都有输入,根据不同的输入来绘制,需要发挥你脑力. 1.canvas简单使用 1.1先看我们的html,需要一个绘图的区域 <canvas id="drawing" width="500px" height="500px"></canvas>

[Echarts]用Echarts绘制饼状图

在项目网站的网页中,有这样一幅图: 心血来潮,想使用百度Echarts来绘制一下,可是没能绘制得完全一样,Echarts饼状图的label不能在图形下面放成一行,最后的效果是这样子的: 鼠标移动到items上,可动态显示百分比: 另外,还了解到了一种特殊的饼状图:南丁格尔图,就是用扇形半径的大小来表示百分比,对于相差比较大的items,看起来会有些不平衡: 最后,上代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta ch

svg动态绘制饼状图

1.<path>绘制圆弧曲线 语法:d="A rx ry x-axis-rotation large-arc-flag sweep-flag x y" A  命令绘制椭圆弧. 参数含义: rx,ry:椭圆的长半轴.短半轴: x-axis-rotation:该段弧 所在椭圆的x轴与水平方向的夹角: large-arc-flag:值可为0或1,0为小弧度角,1为大弧度角: sweep-flag:绘制方向,0为逆时针,1为顺时针: x,y椭圆弧终点坐标. 2.js动态svg va

d3.js绘制饼状图

<!DOCTYPE html> <html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px"> <head> <title></title> <meta charset="utf-8"> <meta name="viewport

绘制饼状图效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #canvas{ background: #988E75; margin: 0 auto; display: block; position: relative; } </style> </head> <body>

使用echarts绘制饼状图

前端代码: 1 <script src="${ctx}/static/plugin/echarts/echarts-v4.2.0/echarts.common.min.js"></script> 2 <div id="main" style="width: 600px;height:400px;"></div> 3 <script type="text/javascript"