作者：技术控 | 时间：2014-6-11 12:45:35 | [小 大] | 来源：STEPDAY的技术控 |
1、新建一个Index.aspx页面
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>HighCharts纯JS图表如何应对大数据量</title> <script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript"> var chart; var options; $(function () { $(document).ready(function () { options = { chart: { renderTo: 'container', type: 'line' }, title: { text: 'HighCharts大数据量支持情况', x: -20 //center }, subtitle: { text: '',//副标题 x: -20 }, xAxis: { categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'], labels: { step: 200, rotation: 0,//坐标旋转角度 为0：表示横放置 staggerLines: 0, //标签的交错显示（上下) enable:true //是否显示坐标值 }, title: { text:'月份' }, //标线属性 plotLines: [{ value: 0, width: 1, color: '#808080' }] }, yAxis: { title: { text: '百分比(%)' }, //标线属性 plotLines: [{ value: 0, width: 1, color: '#808080' }] //, //max:'50', //y轴最大值 //min:'10' //y轴最小值 }, tooltip: { formatter: function () { return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y + ''; } }, plotOptions: { series: { marker: { enabled: false, states: { hover: { enabled: true } } } } }, credits: { enabled: false //右下角不显示LOGO }, series: [{ name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] }, { name: 'New York', data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] }, { name: 'Berlin', data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] }, { name: 'London', data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] }] }; Query(); }); }); function Query() { var MaxNum = document.getElementById("txtMaxNum").value; $.ajax({ type: 'POST', async: false, url: "/Ajax/Index_Ajax.aspx?" + "RequestTime=" + (new Date().getTime()).toString() + "&type=series&MaxNum="+MaxNum, dataType: "json", beforeSend: function () { }, success: function (msg) { if (msg) { //设置X轴 options.xAxis.categories = eval(msg.categories); //设置Y轴 options.series = eval(msg.series); //设置图表 chart = new Highcharts.Chart(options); } }, error: function (errorMsg) { } }); } </script> </head> <body> <form runat="server"> <script type="text/javascript" language="javascript" src="/js/highcharts.js"></script> <script type="text/javascript" language="javascript" src="/js/exporting.js"></script> <div> </div> <div> 设置数据点<input type="text" value="1000" /> <input type="button" value="查询" /> </div> <div> 实际产生的数据点个数=设置的数据点*10(默认设置了10个类别) </div> </form> </body> </html>
2、创建一个/Ajax/Index_Ajax.aspx页面
核心代码如下：
int MaxNum;
////// 初始化参数
/////////protected void Page_Load(object sender, EventArgs e)
{
string getType = Request["type"];
MaxNum = Convert.ToInt32(Request["MaxNum"]);
if (!string.IsNullOrEmpty(getType))
{
switch (getType)
{
case "series":
GetSeries();
break;
case "xAxis":
GetxAxisCategories();
break;
}
}
}
////// 获取横轴表的标签
///protected void GetxAxisCategories()
{
string xAxisCategories = "";//"['北京市', '上海市', '重庆市', '天津市','抚州市','长沙市','常德市','济南市']";
xAxisCategories += "[";
for (int i = 0; i < 1000; i++)
{
if (!xAxisCategories.Equals("["))
xAxisCategories += ",'" + i.ToString() + "月'";
else
xAxisCategories += "'" + i.ToString() + "月'";
}
xAxisCategories += "]";
Response.Write(xAxisCategories);
//Response.End();
}
////// 获取横坐标标签以及数据点
///protected void GetSeries()
{
string returnValue = "";//"[{name: '人员体系城市分布情况',data: [15,18,13,13,10,16,23,23]}]";
string xAxisCategories = "";//"['北京市', '上海市', '重庆市', '天津市','抚州市','长沙市','常德市','济南市']";
xAxisCategories += "[";
returnValue = "[";
for (int i = 0; i < MaxNum; i++)
{
if (!xAxisCategories.Equals("["))
xAxisCategories += ",'" + i.ToString() + "月'";
else
xAxisCategories += "'" + i.ToString() + "月'";
}
for(int i =0;i<10;i++)
{
if (!returnValue.Equals("["))
returnValue += ",{name:'" + i.ToString() + "君',data:["+GetRandomData(i)+"]}";
else
returnValue += "{name:'" + i.ToString() + "君',data:[" + GetRandomData(i) + "]}";
}
returnValue += "]";
xAxisCategories += "]";
var rel = new {
categories = xAxisCategories,
series = returnValue
};
Response.Write(rel.ToJson());
Response.End();
}
////// 获取随机数据，仅仅用于测试之用
/////////protected string GetRandomData(int MinNum)
{
string dataStr = "";
for (int i = 0; i < MaxNum; i++)
{
if (string.IsNullOrEmpty(dataStr))
dataStr += new Random().Next(MinNum, MaxNum).ToString();
else
dataStr += "," + new Random().Next(MinNum, MaxNum).ToString();
}
return dataStr;
}
3、特别说明
2）、Demo内的数据均为随机数据，后期可自行修改从数据库内获取数据；
3）、务必需要保证sereis内接收的数据位非字符串类型才是，否则会报出Highcharts errors 14的错误。
相关文章
精彩导读
热门资讯
关注我们
