在进行实现动态更新图表时主要使用AJAX技术，主要分两种实现方法，一种是通过ASP.NET特有的AJAX控件，UpdatePanel、Timer控件+ASP.NET自带的Chart控件实现；另一种为使用第三方的图表库+JQUERYAJAX实现。
ASP.NET控件实现
实现：
前台将要定时刷新的内容放到updatePanel中即可，前台代码如下：
<form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> <Scripts> <asp:ScriptReference Path="~/MyScript.js" /> //useless </Scripts> <Services> <asp:ServiceReference Path="~/MyService.asmx" /> //useless </Services> </asp:ScriptManager> <div> <asp:UpdatePanel ID="ReportPanel" runat="server"> <ContentTemplate> <h1> ASP.NET AJAX自动刷新【GridView】 </h1> <asp:GridView ID="GridView1" runat="server"></asp:GridView> <asp:Timer ID="Time1" runat="server" Interval="5000" OnTick="Time1_Tick" ></asp:Timer> <asp:Label runat="server" ID="ResultLabel" /> <br /> </ContentTemplate> <Triggers > <asp:AsyncPostBackTrigger EventName="Tick" ControlID="Time1" /> </Triggers> </asp:UpdatePanel> </div> </form>
后台代码主要实现定时刷新，使用Timer控件的事件比较简单
protected void Time1_Tick(object sender, EventArgs e) { GridView1.DataSource = task.GetData(); GridView1.DataBind(); ResultLabel.Text = task.GetData().Tables[0].Rows.Count.ToString() + " | " + DateTime.Now.ToString() ; }
问题：
使用ASP.NET系列控件实现起来比较简单，但是由于自带的chart控件，生成的图表为图片，所以在每次刷新时，会出现闪动的情况。
AJAX+EChart实现
EChart为百度实现的功能强大的图表库，官方文档很详细，但使用起来也比较复杂
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>初始化图表时通过ajax同步获取数据并渲染图表示例</title> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/esl.js" type="text/javascript"></script> <script src="js/echarts.js" type="text/javascript"></script> </head> <body> <!--定义页面图表容器--> <!-- 必须制定容器的大小（height、width） --> <div id="main" style="height: 400px; border: 1px solid #ccc; padding: 10px;"> </div> <script type="text/javascript" language="javascript"> // Step:4 require echarts and use it in the callback. // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径 require( [ 'echarts', 'echarts/chart/line' //按需加载图表关于线性图、折线图的部分 ], DrawEChart //异步加载的回调函数绘制图表 ); var myChart; //创建ECharts图表方法 function DrawEChart(ec) { //--- 折柱 --- myChart = ec.init(document.getElementById('main')); //图表显示提示信息 myChart.showLoading({ text: "图表数据正在努力加载..." }); //定义图表options var options = { title: { text: "通过Ajax获取数据呈现图标示例", subtext: "www.stepday.com", sublink: "http://www.stepday.com/myblog/?Echarts" }, tooltip: { trigger: 'axis' }, legend: { data: [] }, toolbox: { show: true, feature: { mark: false } }, calculable: true, xAxis: [ { type: 'category', data: [] } ], yAxis: [ { type: 'value', splitArea: { show: true } } ], series: [] }; //通过Ajax获取数据 $.ajax({ type: "post", async: false, //同步执行 url: "/Ajax/GetChartData.aspx?type=getData&count=12", dataType: "json", //返回数据形式为json success: function (result) { if (result) { //将返回的category和series对象赋值给options对象内的category和series //因为xAxis是一个数组 这里需要是xAxis[i]的形式 options.xAxis[0].data = result.category; options.series = result.series; options.legend.data = result.legend; myChart.hideLoading(); myChart.setOption(options); } }, error: function (errorMsg) { alert("不好意思，大爷，图表请求数据失败啦!"); } }); } </script> </body> </html>
后台GetData.aspx代码
private void GetAjaxData(string pointCount) { //为了演示效果 这里采用随机数据来代替 后期可以根据自己情况换成访问数据获取数据 //考虑到图表的category是字符串数组 这里定义一个string的List List<string> categoryList = new List<string>(); //考虑到图表的series数据为一个对象数组 这里额外定义一个series的类 List<Series> seriesList = new List<Series>(); //考虑到Echarts图表需要设置legend内的data数组为series的name集合这里需要定义一个legend数组 List<string> legendList = new List<string>(); int _pointCount; //如果数据非整型 默认给予10个数据 if (!int.TryParse(pointCount,out _pointCount)) { _pointCount = 10; } //设置legend数组 legendList.Add("Series 1"); //这里的名称必须和series的每一组series的name保持一致 //定义一个Series对象 Series seriesObj = new Series(); seriesObj.id = 1; seriesObj.name = "Series 1"; seriesObj.type = "line"; //线性图呈现 seriesObj.data = new List<int>(); //先初始化 不初始化后面直直接data.Add(x)会报错 //设置数据 for (int i = 1; i <= _pointCount; i++) { //加入category刻度数组 categoryList.Add(string.Format("刻度{0}", _pointCount)); //加入数据值series序列数组 这里提供为了效果只提供一组series数据好了 seriesObj.data.Add(i); //数据依次递增 } //将sereis对象压入sereis数组列表内 seriesList.Add(seriesObj); //最后调用相关函数将List转换为Json //因为我们需要返回category和series、legend多个对象 这里我们自己在new一个新的对象来封装这两个对象 var newObj = new { category = categoryList, series = seriesList, legend = legendList }; //Response返回新对象的json数据 Response.Write(newObj.ToJson()); Response.End(); } } /// <summary> /// 定义一个Series类 设置其每一组sereis的一些基本属性 /// </summary> class Series { /// <summary> /// sereis序列组id /// </summary> public int id { get; set; } /// <summary> /// series序列组名称 /// </summary> public string name { get; set; } /// <summary> /// series序列组呈现图表类型(line、column、bar等) /// </summary> public string type { get; set; } /// <summary> /// series序列组的数据为数据类型数组 /// </summary> public List<int> data { get; set; }
问题：
Echart控件需要先设置好div大小后再进行初始化图像，不能根据数据量动态改变图形区的大小
AJAX+HighChart
实现
<head> <title>highcharts </title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="format-detection" content="telephone=no" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/highcharts.js"></script> <!-- <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>--> </head> <body> <div id="container" style="height: 400px;"> </div> <script type="text/javascript"> var chart; var options; $(function () { DrawChart(); }); function DrawChart() { options = { chart: { renderTo: 'container', animation: false, type: 'bar' }, title: { text: '菜品销售动态' }, xAxis: { categories: [], title: { text: null} }, yAxis: { min: 0, title: { text: '销售额 (元)', align: 'high' }, labels: { overflow: 'justify'} }, credits: { enabled: false }, series: [{ name: '销售额', animation: false, dataLabels: { enabled: true }, data: [] }] }; chart = new Highcharts.Chart(options); GetAjaxChartData(); } function Change() { var container = document.getElementById("container"); container.style.height = "800px"; DrawChart(); } //点击按钮获取图表数据采用ajax方式 var GetAjaxChartData = function () { //通过Ajax获取数据 $.ajax({ type: "post", async: false, //同步执行 url: "GetData.aspx", timeout: 5000, dataType: "json", //返回数据形式为json success: function (result) { if (result) { //将返回的category和series对象赋值给options对象内的category和series // options.xAxis.categories = ['asd', 'qwe','vvv']; // options.series[0].data = [1, 2, 3]; document.getElementById("container").style.height = result.series.length * 21 + "px"; options.xAxis.categories = result.category; //数据类要一致，value类型，不能使用string赋值 options.series[0].data = result.series; chart = new Highcharts.Chart(options); } }, error: function (errorMsg) { alert(errorMsg); } }); } setInterval(GetAjaxChartData, 5000); </script> </body>
后台
/// <summary> /// 获得数据且用Json格式数据返回 /// </summary> private void GetAjaxData() { TaskClass task = new TaskClass(); DataTable dt = task.GetData().Tables[0]; string[] xArr = new string[dt.Rows.Count]; List<decimal> yArr = new List<decimal>(); //设置数据 for (int i = 0; i < dt.Rows.Count; i++) { xArr[i] = dt.Rows[i][1].ToString(); yArr.Add(Convert.ToDecimal(dt.Rows[i][4])); } //Response返回新对象的json数据 var newObj1 = new { category = xArr, series = yArr }; Response.Write(NewtonsoftJson(newObj1)); Response.End(); } public string NewtonsoftJson(object obj) { return Newtonsoft.Json.JsonConvert.SerializeObject(obj, Newtonsoft.Json.Formatting.None); }
问题：
基本实现了想要的效果，但是也遇到了问题【HighCharts TypeError: I is not a function 】，最后发现在引入JQuery和highcharts文件时，JQuery必须必须要放在上面。