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

最新推荐文章于 2021-02-23 16:33:30 发布

beMyselfeveryday

最新推荐文章于 2021-02-23 16:33:30 发布

阅读量1.1k

点赞数

分类专栏： HighCharts 文章标签： highCharts+ajax+json

本文链接：https://blog.csdn.net/u010158775/article/details/43763823

版权

HighCharts 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

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'
                     },
                     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: [{ name: '今年', type: 'spline',data:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] },
                            { name: '去年', type: 'column', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
                               { name: '前年', type: 'column', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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}' ", "Data", 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();