ASP.NET的FusionChart制作图表

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"falsefalse);

这是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,让表显示在它里面。
         效果图:


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值