從事過ASP.NET開發的可能都會接觸到一些圖表控件，比如OWC、ZendGraph等等，這些控件都有一個特點，那就是我們可以像操作.NET中的對象一樣控制它們的某些屬性，有可能在本地開發好了上傳到服務器端部署運行的時候會出現權限問題而導致不能正常運行。本篇周公講述一個JavaScript的圖表控件，不要小看了這個JavaScript圖表控件，它能生成各種常見的圖表。
Highcharts是一個JavaScript的圖表控件，它的官方網站網址是：//www.highcharts.com/，參考手冊網址是：//www.highcharts.com/ref/，示例網址是：//www.highcharts.com/demo/。要想簡單使用它的圖表功能，只需要兩個JS類庫即可，一個是jquery的，另外一個就是它本身的。但是如果需要支持主題和導出圖表功能，就需要更多的JS類庫支持了。本篇只講述滿足大多數要求的基本功能。
準備工作
首先從//jquery.com/下載最新版本的jQuery，然后從//www.highcharts.com/下載Highcharts的JavaScript類庫。將這兩個文件下載到本地的Web項目的JS文件下。
因為Highcharts是根據js腳本中的屬性設置來生成圖表的，因為我們需要在ASP.NET中輸出這些腳本。為了方便，周公將生成各種圖表的核心邏輯部分抽取出來作為一個模板，需要的時候從這些模板中讀取數據，然后將模板中的標簽替換掉，這樣就可以輸出到客戶端了。這些帶有標簽的JS模板位于js/template目錄下。
除了輸出控制邏輯代碼之外，還要在網頁的ready客戶端事件中調用，如下格式：
$(document).ready(function() {//這里是邏輯和控制代碼});
編碼
為了便于演示，周公在創建ASP.NET頁面的時候使用了單頁模式，整個頁面的代碼如下：
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Text" %>
<%@ Import Namespace="System.IO" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<mce:script runat="server"><!--
public string result = string.Empty;
protected void Page_Load(object sender, EventArgs e)
{
string graphType = ddlGraphType.SelectedValue;
graphType = graphType.ToLower();
switch (graphType)
{
case "line": result=OutputLine(); break;
case "spline": result = OutputSpline(); break;
case "area": result = OutputArea(); break;
case "areaspline": result = OutputAreaSpline(); break;
case "column": result = OutputColumn(); break;
case "bar": result = OutputBar(); break;
case "pie": result = OutputPie(); break;
case "scatter": result = OutputScatter(); break;
}
}
private string OutputLine()
{
string result = string.Empty;
using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/line.js"), Encoding.UTF8))
{
StringBuilder buffer = new StringBuilder(reader.ReadToEnd());
buffer.Replace("{#title#}", "周公的演示例子");
result = buffer.ToString();
}
return result;
}
private string OutputSpline()
{
string result = string.Empty;
using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/spline.js";), Encoding.UTF8))
{
StringBuilder buffer = new StringBuilder(reader.ReadToEnd());
buffer.Replace("{#title#}", "周公的演示例子");
result = buffer.ToString();
}
return result;
}
private string OutputArea()
{
string result = string.Empty;
using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/area.js"), Encoding.UTF8))
{
StringBuilder buffer = new StringBuilder(reader.ReadToEnd());
buffer.Replace("{#title#}", "周公的演示例子");
result = buffer.ToString();
}
return result;
}
private string OutputAreaSpline()
{
string result = string.Empty;
using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/areaspline.js"), Encoding.UTF8))
{
StringBuilder buffer = new StringBuilder(reader.ReadToEnd());
buffer.Replace("{#title#}", "周公的演示例子");
result = buffer.ToString();
}
return result;
}
private string OutputColumn()
{
string result = string.Empty;
using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/column.js"), Encoding.UTF8))
{
StringBuilder buffer = new StringBuilder(reader.ReadToEnd());
buffer.Replace("{#title#}", "周公的演示例子");
result = buffer.ToString();
}
return result;
}
private string OutputBar()
{
string result = string.Empty;
using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/bar.js"), Encoding.UTF8))
{
StringBuilder buffer = new StringBuilder(reader.ReadToEnd());
buffer.Replace("{#title#}", "周公的演示例子");
buffer.Replace("{#subTitle#}", "扇形圖表");
//下面的數據應該是從數據庫來，為了演示，這里直接上了
string data = "{name: '1812年',data: [107, 31, 635, 203, 2]}, {name: '1912年',data: [133, 156, 947, 408, 6]}, {name: '2012年',data: [973, 914, 4054, 732, 34]}";
buffer.Replace("{#series#}", data);
result = buffer.ToString();
}
return result;
}
private string OutputPie()
{
string result = string.Empty;
using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/pie.js"), Encoding.UTF8))
{
StringBuilder buffer = new StringBuilder(reader.ReadToEnd());
buffer.Replace(";{#title#}", "周公的演示例子");
result = buffer.ToString();
}
return result;
}
private string OutputScatter()
{
string result = string.Empty;
using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/scatter.js"), Encoding.UTF8))
{
StringBuilder buffer = new StringBuilder(reader.ReadToEnd());
buffer.Replace(";{#title#}", "周公的演示例子");
result = buffer.ToString();
}
return result;
}
// --></mce:script>
<html xmlns="//www.w3.org/1999/xhtml">
<head runat="server">
<title>Hign Charts 實例</title>
<mce:script src="js/jquery-1.5.2.min.js" mce_src="js/jquery-1.5.2.min.js" type="text/javascript"></mce:script>
<mce:script src="js/highcharts.js" mce_src="js/highcharts.js" type="text/javascript"></mce:script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table border="0" width="800">
<tr><td>請選擇圖表類型：<asp:DropDownList runat="server" ID="ddlGraphType"
AutoPostBack="True">
<asp:ListItem>line</asp:ListItem>
<asp:ListItem>spline</asp:ListItem>
<asp:ListItem>area</asp:ListItem>
<asp:ListItem>areaspline</asp:ListItem>
<asp:ListItem>column</asp:ListItem>
<asp:ListItem>bar</asp:ListItem>
<asp:ListItem>pie</asp:ListItem>
<asp:ListItem>scatter</asp:ListItem>
</asp:DropDownList></td></tr>
<tr><td><div id="container"; style="width: 800px; height: 400px; margin: 0 auto"></div></td></tr>
</table>
</div>
</form>
<mce:script type="text/javascript"><!--
var chart;
$(document).ready(function() {
<%=result %>
});
// --></mce:script>
</body>
</html>
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Text" %>
<%@ Import Namespace="System.IO" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<mce:script runat="server"><!--
public string result = string.Empty;
protected void Page_Load(object sender, EventArgs e)
{
string graphType = ddlGraphType.SelectedValue;
graphType = graphType.ToLower();
switch (graphType)
{
case "line": result=OutputLine(); break;
case "spline": result = OutputSpline(); break;
case "area": result = OutputArea(); break;
case "areaspline": result = OutputAreaSpline(); break;
case "column": result = OutputColumn(); break;
case "bar": result = OutputBar(); break;
case "pie": result = OutputPie(); break;
case "scatter": result = OutputScatter(); break;
}
}
private string OutputLine()
{
string result = string.Empty;
using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/line.js"), Encoding.UTF8))
{
StringBuilder buffer = new StringBuilder(reader.ReadToEnd());
buffer.Replace("{#title#}", "周公的演示例子");
result = buffer.ToString();
}
return result;
}
private string OutputSpline()
{
string result = string.Empty;
using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/spline.js"), Encoding.UTF8))
{
StringBuilder buffer = new StringBuilder(reader.ReadToEnd());
buffer.Replace("{#title#}", "周公的演示例子");
result = buffer.ToString();
}
return result;
}
private string OutputArea()
{
string result = string.Empty;
using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/area.js"), Encoding.UTF8))
{
StringBuilder buffer = new StringBuilder(reader.ReadToEnd());
buffer.Replace("{#title#}", "周公的演示例子");
result = buffer.ToString();
}
return result;
}
private string OutputAreaSpline()
{
string result = string.Empty;
using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/areaspline.js"), Encoding.UTF8))
{
StringBuilder buffer = new StringBuilder(reader.ReadToEnd());
buffer.Replace("{#title#}", "周公的演示例子");
result = buffer.ToString();
}
return result;
}
private string OutputColumn()
{
string result = string.Empty;
using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/column.js"), Encoding.UTF8))
{
StringBuilder buffer = new StringBuilder(reader.ReadToEnd());
buffer.Replace("{#title#}", "周公的演示例子");
result = buffer.ToString();
}
return result;
}
private string OutputBar()
{
string result = string.Empty;
using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/bar.js"), Encoding.UTF8))
{
StringBuilder buffer = new StringBuilder(reader.ReadToEnd());
buffer.Replace("{#title#}", "周公的演示例子");
buffer.Replace("{#subTitle#}", "扇形圖表");
//下面的數據應該是從數據庫來，為了演示，這里直接上了
string data = "{name: '1812年',data: [107, 31, 635, 203, 2]}, {name: '1912年',data: [133, 156, 947, 408, 6]}, {name: '2012年',data: [973, 914, 4054, 732, 34]}";
buffer.Replace("{#series#}", data);
result = buffer.ToString();
}
return result;
}
private string OutputPie()
{
string result = string.Empty;
using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/pie.js"), Encoding.UTF8))
{
StringBuilder buffer = new StringBuilder(reader.ReadToEnd());
buffer.Replace("{#title#}", "周公的演示例子");
result = buffer.ToString();
}
return result;
}
private string OutputScatter()
{
string result = string.Empty;
using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/scatter.js"), Encoding.UTF8))
{
StringBuilder buffer = new StringBuilder(reader.ReadToEnd());
buffer.Replace("{#title#}", "周公的演示例子";);
result = buffer.ToString();
}
return result;
}
// --></mce:script>
<html xmlns="//www.w3.org/1999/xhtml">
<head runat="server">
<title>Hign Charts 實例</title>
<mce:script src="js/jquery-1.5.2.min.js" mce_src="js/jquery-1.5.2.min.js" type="text/javascript"></mce:script>
<mce:script src="js/highcharts.js" mce_src="js/highcharts.js" type="text/javascript"></mce:script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table border="0" width="800">
<tr><td>請選擇圖表類型：<asp:DropDownList runat="server" ID="ddlGraphType"
AutoPostBack="True">
<asp:ListItem>line</asp:ListItem>
<asp:ListItem>spline</asp:ListItem>
<asp:ListItem>area</asp:ListItem>
<asp:ListItem>areaspline</asp:ListItem>
<asp:ListItem>column</asp:ListItem>
<asp:ListItem>bar</asp:ListItem>
<asp:ListItem>pie</asp:ListItem>
<asp:ListItem>scatter</asp:ListItem>
</asp:DropDownList></td></tr>
<tr><td><div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div></td></tr>
</table>
</div>
</form>
<mce:script type="text/javascript"><!--
var chart;
$(document).ready(function() {
<%=result %>
});
// --></mce:script>
</body>
</html>
演示
運行頁面之后，效果如下：
說明：1.在官方的實例中是采用了ajax.googleapis.com上的jQuery庫，如果在不能聯網的局域網中則不能正常運行，因為周公直接將jQuery類庫下載到本地，這樣就不需要聯網也能運行了。2.在官方示例中，是直接在$(document).ready()這個方法中將全部邏輯放在這個方法中，在實際開發中可能有大量的邏輯需要判斷和處理，所以在這個例子中采用模板替換的方式。
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自：周公的專欄
半島外圍網上直營 
137次
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線