(一). 写本文章目的:
学了一段时间componentone的图表,感觉componenone图表控件还可以,图表样式也较丰富
不过它的帮助全是英文的,而且有些地方写的比较粗糙,示例程序也不够详细. 我把它总结了一下.
(二).使用方法
1.安装好componentone软件.
2.建立一个web应用程序项目,名称为: textchart
3.将componentone软件自带的控件集dll文件(不一定全部,只把需要的一部分)拷贝到自己刚建的
项目textchart的bin目录下面 (这里要手动放的原因是componentone有时会找不到dll)
4.双击项目里任何一个*.aspx文件,打开设计界面。 打开工具栏,在工具栏空白处右击,选“添加/删除”
项,打开自定义控件窗口,在.net frame 组件选项卡下选择componentone相应的组件,如果有清楚,
就将所有的c1开头的全部勾选,点“确定按钮". 则componentone的控件就显示在工具箱里面了 :)
5. 到了这一步,就可以将componentone控件像一般控件一样直接拖动使用了. 拖c1webchart控件到
窗体页面上. 然后右击控件,选 "chart wizard..."就可以为其设置显示的样式(饼图/柱状图/折线图等)和
属性了,用法跟一般控件差不多。(如果感觉还是陌生的话,请看下面(三),除了用设计器设置外,
还可以代码用代码设置)
(三) . 代码设置
1. 限于篇幅,只讲解主要的属性
2.所有的图表样式原理差不多都一样的,这里只讲一下饼图的实现方法
using c1.web.c1webchart; //命名空间,必需加入,否则找不到里面的类和方法等
using c1.web.c1webchartbase;
using c1.win.c1chart;
protected c1.web.c1webchart.c1webchart c1webchart1; // 控件声明
1) <summary>主要属性</summary>
c1webchart1.header.text="chart 头"; //图表头标题
c1webchart1.footer.text="chart 尾"; //图表尾文本
c1webchart1.backcolor = color.lightsteelblue; //背景色
c1webchart1.imageformat = system.drawing.imaging.imageformat.png; //图像存储格式
c1webchart1.chartgroups.group0.charttype = chart2dtypeenum.bar; //图表
// 类型,chart2dtypeenum枚举下有所有的图表样式,如饼图/柱状图等
c1webchart1.width=800; //图表宽度
2) <summary>主要方法</summary>
a .x轴标签(坐标)的方法,直接调用即可
public void addaxisx()
{
// label x axis with product names
axis ax = c1webchart1.chartarea.axisx;
ax.valuelabels.clear();
ax.annomethod = annotationmethodenum.valuelabels;
for(int i = 0; i < 100; i++)
{
//datarowview drv = dv[i];
ax.valuelabels.add(i, (i+1).tostring());
}
try
{
ax.max = 10 - .5;
}
catch {}
}
a .y轴标签(坐标)的方法,直接调用即可
public void addaxisy()
{
// label y axis with product names
axis ay = c1webchart1.chartarea.axisy;
ay.valuelabels.clear();
ay.annomethod = annotationmethodenum.valuelabels;
for(int i = 0; i < 10; i++)
{
//datarowview drv = dv[i];
ay.valuelabels.add(i, (50*i).tostring());
}
try
{
ay.max = 20 - .5;
}
catch {}
}
c.画图表的方法
public void getpiedata()
{
c1webchart1.legend.visible = true; //图表区块注释.
this.addaxisx(); //上面方法a
this.addaxisy(); //上面方法b
//生成数据
pointf[] data = new pointf[10];
for (int i = 0; i < data.length; i++)
{
float y = float.parse((3*i+5).tostring());
data[i] = new pointf(i, y);
}
//清除现有的饼图
chartdataseriescollection dscoll = c1webchart2.chartgroups[0].chartdata.serieslist;
dscoll.clear();
//汇图,即将点数组交给控件,它会自己分配,并画出图形
chartdataseries series = c1webchart1.chartgroups[0].chartdata.serieslist[0];
series.pointdata.copydatain(data);// 这里的data是pointf类型
//给区块加标签
for(int i=0; i < data.length; i++)
{
chartdataseries series = dscoll.addnewseries();
series.pointdata.length = 1;
series.y[0] = data[i].y;
series.label="我是:"+(i+1).tostring();
//加标签
c1.win.c1chart.label lbl = c1webchart1.chartlabels.labelscollection.addnewlabel();
lbl.text = string.format("{0} ({1:c})","第:"+i.tostring()+"扇区", data[i].y);
lbl.compass = labelcompassenum.radial;
lbl.offset = 20;
lbl.connected = true;
lbl.visible = true;
lbl.attachmethod = attachmethodenum.dataindex;
attachmethoddata am = lbl.attachmethoddata;
am.groupindex = 0;
am.seriesindex = i;
am.pointindex = 0;
}
}
finished.