在进行实现动态更新图表时主要使用AJAX技术，主要分两种实现方法，一种是通过ASP.NET特有的AJAX控件，UpdatePanel、Timer控件+ASP.NET自带的Chart控件实现；另一种为使用第三方的图表库+JQUERY\AJAX实现。
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必须必须要放在上面。
时间： 2024-08-05 19:33:13