您的位置:首页 > 编程语言 > ASP

ASP.NET的FusionChart制作图表

2015-01-28 10:28 363 查看
VS有自带的Chart插件,但视觉效果上感觉不如FusionCharts炫,下面说说用FusionCharts制作图标

1.下载FusionCharts

2.将解压后的文件复制到你的项目中

,必须引用(FusionCharts.dll文件和InfoSoftGlobal.dll文件,否则会报错:上下文中不存在FusionCharts.),如果没有就去下载一个添到项目中。

3.在你的aspx页面上引入<script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>,否则脚本报错,图表无法显示

前台怎么制作简单报表就不说了,相信大部分都是从。cs文件中获取值,然后数据写到表中。

StringBuilder xmlData = new StringBuilder();

xmlData.Append("<chart caption='IPL
Points' subCaption='For Season 2011 so far' 
showPercentValues='1' pieSliceDepth='30' showBorder='1'>");
xmlData.AppendFormat("<set
label='Mumbai' value='{0}' />", 数据);

xmlData.AppendFormat("<set label='Chennai'
value='{0}' />",

数据);

xmlData.AppendFormat("<set label='Kochi'
value='{0}' />",

数据);

xmlData.Append("</chart>");

Literal1.Text = FusionCharts.RenderChart("FusionCharts/Pie3D.swf", "", 

xmlData.ToString(), "Sales", "500", "300", false, false);

这是3D的饼状图。

接下来再说双Y轴的折线图:

我是把从数据库读出的数据先写到DataTabele中:

 DataTable dt = new DataTable();        

            dt.Columns.Add("分中心", typeof(System.String));

            dt.Columns.Add("订单数量", typeof(System.Int32));

            dt.Columns.Add("服务份数", typeof(System.Int32));

 
while (sqlDataReader.Read())

                {

    v1 = (string)sqlDataReader[0];//v1,v2,v3在循环外定义好

                    v2 = Convert.ToInt32(sqlDataReader[1]);

                    v3 = Convert.ToInt32(sqlDataReader[2]);

 
    DataRow dr = dt.NewRow();

                    dr[0] = v1+"分中心";

                    dr[1] = v2;

         dt.Rows.Add(dr);    

}

然后在把DataTable中数据写到双Y轴折线图中:(以XML格式)

在统计的button点击事件里面写:

StringBuilder xmlData1 = new StringBuilder();

                xmlData1.Append("<chart palette='2' caption='统计图' baseFontSize='13' rotateNames='0' showValues='0' divLineDecimalPrecision='1' limitsDecimalPrecision='1' PYAxisName='订单数量' SYAxisName='服务次数'  formatNumberScale='0'>");

                xmlData1.Append("<categories>");

                for (int i = 0; i <= dt.Rows.Count - 2; i++)

                {

                    xmlData1.AppendFormat("<category label='" + dt.Rows[i]["分中心"] + "'/>");

                }

                xmlData1.Append("</categories>");

                xmlData1.Append("<dataset renderAs='Line' parentYAxis='P' seriesName='订单数量'>");

                for (int i = 0; i <= dt.Rows.Count - 1; i++)

                {

                    xmlData1.AppendFormat("<set value='" + dt.Rows[i]["订单数量"] + "'/>");

                }

                xmlData1.Append("</dataset>");

                xmlData1.Append("<dataset lineThickness='1' parentYAxis='S' seriesName='服务次数' >");

                for (int i = 0; i <= dt.Rows.Count - 1; i++)

                {

                    xmlData1.AppendFormat("<set value='" + dt.Rows[i]["服务份数"] + "'/>");

                }

                xmlData1.Append("</dataset>");

                xmlData1.Append("</chart>");

                Literal1.Text = FusionCharts.RenderChart("../myui/fushionCharts/Charts/MSCombiDY2D.swf", "", xmlData1.ToString(), "", "750", "280", false, false);//建一个Literal,让表显示在它里面。

         效果图:
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐