highCharts+ajax+json+ashx混合图形动态生成

前端之家收集整理的这篇文章主要介绍了highCharts+ajax+json+ashx混合图形动态生成前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
1.第一种:后台绑定
前台
  var options = new Highcharts.Chart({
                     chart: {
                         //将报表对象渲染到层上  
                         renderTo: 'container'
                     },title: {
                         text: ''
                     },xAxis: {
                         categories: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20']
                     },labels: {
                         items: [{
                             html: 'Total fruit consumption',style: {
                                 left: '40px',top: '8px',color: 'black'
                             }
                         }]
                     },series: <%=returnValue
%>
                 });
               
 
后台代码
 
Public string returnValue
 // if (!IsPostBack)
           // {
                //int nowYear = DateTime.Now.Year;
                //DataTable dt = DataAccessTest.getDataTableBysql("select * from T_BookType where Data>=" + (nowYear - 2) + "  and   Data<=" + nowYear);
                //StringBuilder total = new StringBuilder();
                //total.Append("[");
                //for (int i = 0; i < 3; i++)
                //{
                //   // json += "{";
                //    if (nowYear == DateTime.Now.Year)
                //    {
 
                //        total.Append("{type:'spline',name:'今年',data:[");    
                        
                //    }
                //    else if (nowYear == (DateTime.Now.Year - 1))
                //    {
                //        total.Append("{type:'column',name:'去年',data:[");    
                      
                //    }
                //    else
                //    {
                //        total.Append("{type:'column',name:'前年',data:[");
                //    }
                   
                //  //  json += "data:";
                //    string filter = String.Format(" {0}='{1}' ","Data",nowYear);//获取顶级目录.
                //    DataRow[] drs = dt.Select(filter);
              
                //    foreach (DataRow dr in drs)
                //    {
                //        string percent = dt.Rows[i]["percent"].ToString();
                //        total.Append( percent + ",");
                       
                //    }
                //    total.Remove(total.Length - 1,1);
                //    total.Append("]},");
                //    nowYear--;
                //}
                //total.Remove(total.Length - 1,1);
                //total.Append("]");
                //seriesData = total.ToString();
         //   }
2..ajax+json+ashx
  $(function () {
                 //图表
 
                 var options = new Highcharts.Chart({
                     chart: {
                         //将报表对象渲染到层上  
                         renderTo: 'container'
                     },series: [{ name: '今年',type: 'spline',data:[0,0] },{ name: '去年',type: 'column',data: [0,{ name: '前年',0] }]
                 });
               
                 $('#searchButton').click(function () {
                     jQuery.getJSON('DealData/showJson.ashx',null,function (data) {
                         var dataObj = eval(data);
                         alert(dataObj);
                         options.series[0].setData(dataObj[0]);
                         options.series[1].setData(dataObj[1]);
                         options.series[2].setData(dataObj[2]);
                       
                         var chart = new Highcharts.Chart(options); //用前面定义的参数构造一个图表,会自动填充到页面容器中
                     
                     });
                   
                 });
             });
 
 //生成Json的方法
 public static string DataTableMutilJson(DataTable dt)
        {
            string json = "";
           json += "[";
            if (dt != null && dt.Rows.Count > 0)
            {
                int nowYear = DateTime.Now.Year;
                
                for (int i = 0; i < 3; i++)
                {
                   
                    string filter = String.Format(" {0}='{1}' ",nowYear);//获取顶级目录.
                    DataRow[] drs = dt.Select(filter);
                    json += "[";
                    foreach (DataRow dr in drs)
                    {
                        string percent = dr["percent"].ToString();
                        json += Double.Parse(percent) + ",";
                    }
                    json = json.Substring(0,json.Length - 1);
                    json += "],";
               
                    nowYear--;
                }
              json = json.Substring(0,json.Length - 1);
               
             json += "]";
 
            }
            else
            {
                json = "[[]]";
            }
            JavaScriptSerializer jsonSerializer = new JavaScriptSerializer();
            return jsonSerializer.Serialize(json);
          //  return "\"" + json + "\"";
           
        }
 
 

 



Ashx:
context.Response.ContentType = "application/json";
            int nowYear = DateTime.Now.Year;
            DataTable dt = DataAccessTest.getDataTableBysql("select * from T_BookType where Data>=" + (nowYear - 2) + "  and   Data<=" + nowYear);
            string json = DataAccessTest.DataTableMutilJson(dt);
          
             context.Response.Write(json);
            context.Response.End();
原文链接:https://www.f2er.com/ajax/163741.html

猜你在找的Ajax相关文章