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

来源：互联网发布：网络营销软件有哪些编辑：程序博客网时间：2024/05/22 07:07

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();

0 0