上一篇说了饼图的图片生成,现在来说图片上面的Map,对Map的作用不清楚的可以Baidu。
首先你需要的是数据,下面是产生数据的代码,大家主要看的是数据的结构。
/// <summary>
/// 产生数据
/// </summary>
/// <param name="drawWhat">针对哪个类型的数据</param>
/// <returns></returns>
public List<object> GetDrawData(string drawWhat)
{
int type = 1;
switch (drawWhat)
{
case "traffic":
type = 1;
DrawTitle = "交通";
break;
case "peripheral":
type = 2;
DrawTitle = "周边环境";
break;
case "price":
type = 3;
DrawTitle = "门票价格";
break;
case "services":
type = 4;
DrawTitle = "服务质量";
break;
default:
break;
}
BLL.TourVillageVote bll = new CnLife.Tour.BLL.TourVillageVote();
string strWhere = "VillageID=1 and type=" + type;
Model.TourVillageVote v = bll.GetList("*", strWhere, "VillageID").ToArray()[0];
Model.TourVillageVote vote = new CnLife.Tour.Model.TourVillageVote();
List<object> list = new List<object>();
int[] inter = new int[] { v.Value1, v.Value2, v.Value3, v.Value4, v.Value5, v.Value6 };
string[] str = new string[] { "差", "一般", "还行", "好", "很好", "非常好" };
for (int j = 0; j < 6; j++)
{
object[] st = new object[] { str[j], inter[j] };
list.Add(st);
}
return list;
}数据已经产生了,我们在来生成Map
/// <summary>
/// Draw饼图链接
/// </summary>
/// <param name="list">数据源</param>
/// <param name="iSelect">点击了那块</param>
/// <param name="item">饼图类型</param>
/// <returns></returns>
public string DrawMap(List<Object> list, int iSelect,string item)
{
string str = "";
float[] angle = new float[list.Count];
string[] sTxt = new string[list.Count];
float AllCount = 0;
for (int i = 0; i < list.Count; i++)
{
AllCount += Convert.ToSingle(((object[])(list[i]))[1]);
}
for (int i = 0; i < list.Count; i++)
{
object[] o = (object[])list[i];
angle[i] = Convert.ToSingle(o[1]) * 360.0f / AllCount;
sTxt[i] = o[0].ToString();
}
float x = 120.0f, y = 80.0f, d = 200.0f, offset = 15.0f, x1 = 0.0f, y1 = 0.0f;//圆形x,y坐标,半径,偏移距离,x,y方向的偏移值
float curangle = 0.0f;//当前已转的角度
int oAngle = 4;//描点偏移的度数,越小,圆弧就越圆滑。
int ox = 0, oy = 0;//圆心坐标
for (int i = 0; i < angle.Length; i++)
{
if (i == iSelect - 1)
{
x1 = Convert.ToSingle(offset * Math.Cos((curangle + angle[i] / 2) * Math.PI / 180.0f));
y1 = Convert.ToSingle(offset * Math.Sin((curangle + angle[i] / 2) * Math.PI / 180.0f));
ox = Convert.ToInt32(x + d / 2 + x1);
oy = Convert.ToInt32(y + d / 2 + y1);
}
else
{
ox = Convert.ToInt32(x + d / 2);
oy = Convert.ToInt32(y + d / 2);
}
str += "<AREA SHAPE=\"poly\" HREF=\"?item=" + item + "&" + item + "=" + (i + 1) + "\" TITLE=\"" + sTxt[i] + ";票数:" + ((object[])(list[i]))[1].ToString() + "\" COORDS=\"";
str += ox + "," + oy; //圆心
str += "," + (Convert.ToInt32(d / 2 * Math.Cos(curangle * Math.PI / 180.0f)) + ox) + "," + (Convert.ToInt32(d / 2 * Math.Sin(curangle * Math.PI / 180.0f)) + oy);//圆弧的第一个端点的坐标
float MaxAngle = curangle + angle[i];
while (true)
{
curangle += oAngle;
if (curangle >= MaxAngle)//圆弧上的另一个端点,也即最后一个点
{
curangle = MaxAngle;
str += "," + (Convert.ToInt32(d / 2 * Math.Cos(curangle * Math.PI / 180.0f)) + ox) + "," + (Convert.ToInt32(d / 2 * Math.Sin(curangle * Math.PI / 180.0f)) + oy);
break;
}
else //圆弧上的点
{
str += "," + (Convert.ToInt32(d / 2 * Math.Cos(curangle * Math.PI / 180.0f)) + ox) + "," + (Convert.ToInt32(d / 2 * Math.Sin(curangle * Math.PI / 180.0f)) + oy);
}
}
str += "\"> ";
//490,i*12 + 6 + 120,20,8
}
for (int i = 0; i < angle.Length; i++)//描右侧小方形的点
{
str += "<AREA SHAPE=\"rect\" HREF=\"?item=" + item + "&" + item + "=" + (i + 1) + "\" TITLE=\"" + Convert.ToSingle(Convert.ToSingle(((object[])(list[i]))[1]) * 100.0f / AllCount).ToString("F") + "%\" COORDS=\"";
str += "490," + (i * 12 + 6 + 120) + "," + (490 + 20) + "," + (i * 12 + 6 + 120 + 8);
str += "\"> ";
}
return str;
}下来就是要在点击Map上的链接的时候做出反应,这个需要通过获取链接参数
protected string Map = "";
protected string Map1 = "";
protected void Page_Load(object sender, EventArgs e)
{//注GetIntParam是封装好的方法,GetIntParam(string[url中的参数名],Obj[没有获得时所获时的默认值])
Map1 = DrawMap(GetDrawData(drawWhat), GetIntParam(drawWhat, 0), "services")};最后aspx页面上要把Map和Img结合
<map name="Map">
<%=Map%>
</map>
<<img src="DrawVote.aspx?item=traffic&traffic=<%= Request.QueryString["traffic"]%>" usemap="#Map" border=0>
<map name="Map">
<%=Map%>
</map>