JQuery中jsCharts图表插件（十）
一：1.jsCharts图表插件
注意：从官方下来的例子都没指定页面编码，在这种情况下，浏览器就会使用默认设置中文编码：GB2312，GBK等；导致无法执行。
请在html代码中的<head></head>标签对里加入
<meta http-equiv=”content-type” content=”text/html;charset=utf-8″>，也就是指定页面编码【只要不是中文编码就行】
2.下载地址：
官方地址：http://www.jumpeyecomponents.com/JavaScript-Components/Charting/JS-Charts-245/get/JS-Charts_demo.zip (需要注册)
3.使用入门
1 解压：将压缩包中的jscharts.js解压到网站的目录中
2 编码转换：在html代码中的<head></head>标签对里加入<meta http-equiv="content-type" content="text/html;charset=utf-8">,否则会出错。
3 引入js：在代码中添加<script type="text/javascript" src="jscharts.js"></script> 。
4 添加容器：在代码中添加<div id="graph">正在生产图表...</div>
5 添加图表所需数据
方法一：使用json传递数据
<script type="text/javascript">
var myData = new Array([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]);
var myChart = new JSChart('chartcontainer', 'line');
myChart.setDataArray(myData);
myChart.draw();
</script>
<script type="text/javascript">
var myData = new Array([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]);
var myChart = new JSChart('chartcontainer', 'line');
myChart.setDataArray(myData);
myChart.draw();
</script>
方法二：使用外部xml传递数据
<script type="text/javascript">
var myChart = new JSChart('graph', 'line');
myChart.setDataXML("data.xml");
myChart.draw();
</script>
var myChart = new JSChart('graph', 'line');
myChart.setDataXML("data.xml");
myChart.draw();
</script>
xml的标准格式
<?xml version="1.0"?>
<JSChart>
<dataset type="line">
<data unit="10" value="20"/>
<data unit="15" value="10"/>
<data unit="20" value="30"/>
<data unit="25" value="10"/>
<data unit="30" value="5"/>
</dataset>
</JSChart>
最容易出错的地方是中文的使用，需要调整各个文件的编码。<JSChart>
<dataset type="line">
<data unit="10" value="20"/>
<data unit="15" value="10"/>
<data unit="20" value="30"/>
<data unit="25" value="10"/>
<data unit="30" value="5"/>
</dataset>
</JSChart>
二：line图表
代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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></title>
<script src="Scripts/jquery-1.2.6.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.2.6-vsdoc-cn.js" type="text/javascript"></script>
<script src="JS-Charts_demo/sources/jscharts.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
TwoLine();
})
function line() {
var myData = new Array([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]);
var myChart = new JSChart('chartcontainer', 'line');
myChart.setDataArray(myData);
myChart.draw();
}
function pie() {
var myData = new Array(['unit', 20], ['unit two', 10], ['unit three', 30],
['other unit', 10], ['last unit', 30]);
var myChart = new JSChart('chartcontainer', 'bar');
myChart.setDataArray(myData);
myChart.draw();
}
function bar_xml() {
var myChart = new JSChart('chartcontainer', 'bar');
myChart.setDataXML('xml/data_bar.xml');
myChart.draw();
}
function line_xml() {
var myChart = new JSChart('chartcontainer', 'line');
myChart.setDataXML('xml/data_line.xml');
myChart.draw();
}
function pie_xml() {
var myChart = new JSChart('chartcontainer', 'pie');
myChart.setDataXML('xml/data_pie.xml');
myChart.draw();
}
function TwoLine() {
var myData = new Array([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]);
var myData2 = new Array([10, 10], [15, 5], [25, 25], [30, 20]);
var myChart = new JSChart('chartcontainer', 'line');
myChart.setDataArray(myData);
myChart.setDataArray(myData2);
myChart.draw();
}
function TwoLine_xml() {
var myChart = new JSChart('chartcontainer', 'line');
myChart.setDataXML('xml/data_multi_line.xml');
myChart.draw();
}
function customerizeChart1() {
var myData = new Array([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]);
var myChart = new JSChart('chartcontainer', 'line');
myChart.setDataArray(myData);//设置数据
myChart.setBackgroundColor('#efe');//设置图表背景
myChart.setAxisNameX('Custom X Axis Name'); //x轴文字描述
myChart.setAxisNameY('Y Axis');//y轴文字描述
myChart.setSize(400,300); //设置图表大小
myChart.setTitle('My Chart Title');//设置图表标题
myChart.setTitleColor('#000');//设置文字的颜色
myChart.setTitleFontSize(20); //设置文字的大小
myChart.draw();
}
function customerizeChart2() {
var myData = new Array([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]);
var myData2 = new Array([10, 10], [15, 5], [25, 25], [30, 20]);
var myChart = new JSChart('chartcontainer', 'line');
myChart.setDataArray(myData, 'first line'); //给myData数据线起别名：first line
myChart.setDataArray(myData2, 'second line'); //给myData2数据线起别名：second line
myChart.setBackgroundColor('#efe');
myChart.setAxisNameX('Custom X Axis Name');
myChart.setAxisNameY('Y Axis');
myChart.setLineColor('#ff0f0f', 'first line');//设置线的颜色
myChart.setLineWidth(5, 'second line');//设置线的宽度
myChart.setSize(500, 400);
myChart.setTitle('My Chart Title');
myChart.setTitleColor('#5555AA');
myChart.setTitleFontSize(10);
myChart.setTooltip([15, 'My Tooltip', 'first line']);//设置提示
myChart.draw();
}
function customerizeChart_xml1() {
var myChart = new JSChart('chartcontainer', 'line');
myChart.setDataXML('xml/data_customerize_line1.xml');
myChart.draw();
}
function customerizeChart_xml2() {
var myChart = new JSChart('chartcontainer', 'line');
myChart.setDataXML('xml/data_customerize_line2.xml');
myChart.draw();
}
function colorizeBar1() {
var myData = new Array(['one', 20], ['two', 10], ['three', 30], ['four', 10], ['five', 5],['six', 40]);
var myChart = new JSChart('chartcontainer', 'bar');
myChart.setDataArray(myData);
var myColors = new Array('#0f0', '#ff0000', '#00f', '#ff0', '#00ffff','#ccc');
myChart.colorizeBars(myColors);
myChart.draw();
}
function colorizeBar_xml1() {
var myChart = new JSChart('chartcontainer', 'bar');
myChart.setDataXML('xml/data_colorize_bar.xml');
myChart.draw();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="chartcontainer">This is just a replacement in case Javascript is not
available or used for SEO purposes</div>
</div>
</form>
</body>
</html>
Customerize-bar
<script type="text/javascript">
var myData = new Array(['Jan', 2], ['Feb', 1], ['Mar', 3], ['Apr', 6], ['May', 8], ['Jun', 10], ['Jul', 9], ['Aug', 8], ['Sep', 5], ['Oct', 6], ['Nov', 2], ['Dec', 4]);
var colors = ['#CE0000', '#EF2323', '#D20202', '#A70000', '#850000', '#740000', '#530000', '#850000', '#B00000', '#9C0404', '#CE0000', '#BA0000'];
var myChart = new JSChart('graph', 'bar');
myChart.setDataArray(myData);
myChart.colorizeBars(colors);
myChart.setDataArray(myData);
myChart.setAxisColor('#9D9F9D');//设置x|y轴的颜色
myChart.setAxisWidth(1); //设置x|y轴的宽度
myChart.setAxisNameX('Months');//x轴的文字
myChart.setAxisNameY('Values');//y轴的文字
myChart.setAxisNameColor('#655D5D');//x|y轴的文字的颜色
myChart.setAxisNameFontSize(9);//x|y轴的文字的大小
myChart.setAxisPaddingLeft(50);//x轴的左边距
myChart.setAxisValuesDecimals(1); //设置数字的小数点后的位数
myChart.setAxisValuesColor('#9C1919');//设置x|y轴的数字颜色
myChart.setTextPaddingLeft(10);//设置y轴文字的左边距
myChart.setBarValuesColor('#9C1919');//设置bar数据的颜色
myChart.setBarBorderWidth(0);//设置bar边框大小
myChart.setTitleColor('#8C8382');//设置标题文字的颜色
myChart.setGridColor('#5D5F5D');//设置内部GridView的颜色
myChart.draw();
</script>
效果：
折现图：
Customerize-line
<script type="text/javascript">
var myData = new Array([10, 2], [15, 0], [18, 3], [19, 6], [20, 8.5], [25, 10], [30, 9], [35, 8], [40, 5], [45, 6], [50, 2.5]);
var myChart = new JSChart('graph', 'line');
myChart.setDataArray(myData);
myChart.setAxisColor('#656565');
myChart.setAxisNameColor('#4A4A4A');
myChart.setAxisNameFontSize(10);
myChart.setAxisNameX('Horizontal axis values');
myChart.setAxisNameY('Vertical axis');
myChart.setAxisPaddingBottom(60);
myChart.setAxisPaddingLeft(180);
myChart.setAxisPaddingRight(170);
myChart.setAxisPaddingTop(65);
myChart.setAxisValuesColor('#656565');
myChart.setAxisValuesNumberX(6);
myChart.setBackgroundColor('#EEE');
myChart.setGrid(false);
myChart.setLabelY([0, 'Low']);
myChart.setLabelY([5, 'Medium']);
myChart.setLabelY([10, 'High']);
myChart.setLineColor('#8638D5');
myChart.setShowYValues(false);
myChart.setTitle('A customized chart');
myChart.setTitleColor('#505050');
myChart.setSize(616, 321);
myChart.setTextPaddingBottom(20);
myChart.setTextPaddingLeft(120);
myChart.setTextPaddingTop(15);
myChart.setFlagRadius(6);
myChart.setTooltip([25, 'Tooltip for value 25 on X axis']);
myChart.setTooltip([40, 'Tooltip for value 40 on X axis']);
myChart.setBackgroundImage('chart_bg.jpg');
myChart.draw();
</script>
饼状图：
Customerize-pie
<script type="text/javascript">
var myData = new Array(['Jan', 2], ['Feb', 1], ['Mar', 3], ['Apr', 6], ['May', 8], ['Jun', 10], ['Jul', 9], ['Aug', 8], ['Sep', 5], ['Oct', 6], ['Nov', 2], ['Dec', 4]);
var colors = ['#FFCC00', '#FFFF00', '#CCFF00', '#99FF00', '#33FF00', '#00FF66', '#00FF99', '#00FFCC', '#FF0000', '#FF3300', '#FF6600', '#FF9900'];
var myChart = new JSChart('graph', 'pie');
myChart.setDataArray(myData);//设置数据
myChart.colorizePie(colors);//设置pie颜色
myChart.setPiePosition(308, 170);//设置pie 位置
myChart.setPieRadius(95); //设置圆的缩放大小
myChart.setPieUnitsFontSize(8); //设置pie外文字的大小
myChart.setTextPaddingTop(30); //设置标题title的上边距
myChart.setPieUnitsColor('#474747');//设置pie外文字的颜色
myChart.setPieValuesColor('#474747');//设置pie内文字的颜色
myChart.setPieValuesOffset(-10);//设置pie内文字的margin
myChart.setTitleColor('#fff');
myChart.setSize(616, 321); //设置背景大小
myChart.setBackgroundImage('chart_bg.jpg'); //设置背景图片
//myChart.setTooltip(['Jan', 'custom<br>contents']);
myChart.draw();
</script>
结合后台代码的实例：
Dal
/// <summary> /// 统计每个洲的作者人数 /// </summary> /// <returns></returns> public static DataTable StaticStateInfo() { string strsql = "SELECT State ,COUNT(*) AS Number FROM Author GROUP BY [State]"; return DBHelper.GetDataSet(strsql); }
BLL：
/// <summary>
/// 统计每个洲的作者人数
/// </summary>
/// <returns></returns>
public static DataTable StaticStateInfo()
{
return DAL.AuthorService.StaticStateInfo();
}
界面：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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></title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<script src="scripts/jquery-1.2.6.js" type="text/javascript"></script>
<script src="scripts/jscharts.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btnShow").click(function() {
var BuildDiagram = function() {
$.getScript("HandleAuthorStateInfo.aspx", function(data) {
//var colors = ['#CE0000', '#EF2323', '#D20202'];
var myChart = new JSChart('graph', 'bar');
myChart.setDataArray(myData);
//myChart.colorizeBars(colors);
myChart.setDataArray(myData);
myChart.setTitle("");
myChart.setAxisColor('#9D9F9D'); //设置x|y轴的颜色
myChart.setAxisWidth(1); //设置x|y轴的宽度
myChart.setAxisNameX(''); //x轴的文字
myChart.setAxisNameY(''); //y轴的文字
myChart.setAxisNameColor('#655D5D'); //x|y轴的文字的颜色
myChart.setAxisNameFontSize(9); //x|y轴的文字的大小
//myChart.setAxisPaddingLeft(0); //x轴的左边距
myChart.setAxisValuesDecimals(1); //设置数字的小数点后的位数
myChart.setAxisValuesColor('#9C1919'); //设置x|y轴的数字颜色
//myChart.setTextPaddingLeft(0); //设置y轴文字的左边距
myChart.setAxisPaddingBottom(30);
myChart.setAxisPaddingLeft(30);
//myChart.setAxisPaddingRight(170);
myChart.setAxisPaddingTop(30);
myChart.setBarValuesColor('#9C1919'); //设置bar数据的颜色
myChart.setBarBorderWidth(0); //设置bar边框大小
myChart.setTitleColor('#8C8382'); //设置标题文字的颜色
myChart.setGridColor('#5D5F5D'); //设置内部GridView的颜色
// myChart.setBackgroundColor('#efe');
myChart.setSize(616, 321);
myChart.setBackgroundImage('images/chart_bg.jpg');
myChart.draw();
});
};
$("#tbDiagram").show(1000, BuildDiagram);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="Id" DataSourceID="SqlDataSource1" EmptyDataText="没有可显示的数据记录。">
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id" ReadOnly="True"
SortExpression="Id" />
<asp:BoundField DataField="Au_Id" HeaderText="Au_Id" SortExpression="Au_Id" />
<asp:BoundField DataField="Au_Lname" HeaderText="Au_Lname"
SortExpression="Au_Lname" />
<asp:BoundField DataField="Au_Fname" HeaderText="Au_Fname"
SortExpression="Au_Fname" />
<asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" />
<asp:BoundField DataField="Addr" HeaderText="Addr" SortExpression="Addr" />
<asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
<asp:BoundField DataField="State" HeaderText="State" SortExpression="State" />
<asp:BoundField DataField="Zip" HeaderText="Zip" SortExpression="Zip" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:JQuerySimpleDBConnectionString1 %>"
DeleteCommand="DELETE FROM [Author] WHERE [Id] = @Id"
InsertCommand="INSERT INTO [Author] ([Au_Id], [Au_Lname], [Au_Fname], [Phone], [Addr], [City], [State], [Zip]) VALUES (@Au_Id, @Au_Lname, @Au_Fname, @Phone, @Addr, @City, @State, @Zip)"
ProviderName="<%$ ConnectionStrings:JQuerySimpleDBConnectionString1.ProviderName %>"
SelectCommand="SELECT [Id], [Au_Id], [Au_Lname], [Au_Fname], [Phone], [Addr], [City], [State], [Zip] FROM [Author]"
UpdateCommand="UPDATE [Author] SET [Au_Id] = @Au_Id, [Au_Lname] = @Au_Lname, [Au_Fname] = @Au_Fname, [Phone] = @Phone, [Addr] = @Addr, [City] = @City, [State] = @State, [Zip] = @Zip WHERE [Id] = @Id">
<DeleteParameters>
<asp:Parameter Name="Id" Type="Int32" />
</DeleteParameters>
<InsertParameters>
<asp:Parameter Name="Au_Id" Type="String" />
<asp:Parameter Name="Au_Lname" Type="String" />
<asp:Parameter Name="Au_Fname" Type="String" />
<asp:Parameter Name="Phone" Type="String" />
<asp:Parameter Name="Addr" Type="String" />
<asp:Parameter Name="City" Type="String" />
<asp:Parameter Name="State" Type="String" />
<asp:Parameter Name="Zip" Type="String" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="Au_Id" Type="String" />
<asp:Parameter Name="Au_Lname" Type="String" />
<asp:Parameter Name="Au_Fname" Type="String" />
<asp:Parameter Name="Phone" Type="String" />
<asp:Parameter Name="Addr" Type="String" />
<asp:Parameter Name="City" Type="String" />
<asp:Parameter Name="State" Type="String" />
<asp:Parameter Name="Zip" Type="String" />
<asp:Parameter Name="Id" Type="Int32" />
</UpdateParameters>
</asp:SqlDataSource>
</div>
<div><input type="button" id="btnShow" value="显示图表" /></div>
<table border="0" id="tbDiagram" style="display:none;">
<tr><td> </td><td style="text-align:center"><h2>作者信息分布统计图</h2></td></tr>
<tr><td><div style="writing-mode:tb-rl;width:20px;height:200px;">作者:(单位:人)</div></td><td><div id="graph"></div></td></tr>
<tr><td align="center"> </td><td align="center">州(美国)</td></tr>
</table>
</form>
</body>
</html>
动态页面：
protected void Page_Load(object sender, EventArgs e)
{
string script = "var myData = new Array({0});";
DataTable dt = BLL.AuthorManager.StaticStateInfo();
string strTemplate = "['{0}',{1}]";
//string[] arr = new string[dt.Rows.Count];
System.Text.StringBuilder sb = new System.Text.StringBuilder();
for(int i=0;i<dt.Rows.Count;i++)
{
DataRow r = dt.Rows[i];
string oTr = string.Format(strTemplate, r[0].ToString(), r[1].ToString());
//arr[i] = oTr;
sb.Append(oTr);
if (i!=dt.Rows.Count-1) sb.Append(",");
}
Response.Write(string.Format(script, sb.ToString()));
}
JS支持的中文方法：
用法有两种：
1 直接用jscharts_mb.js代替jscharts.js；(已经附加到原代码尾部的版本)
2 加载jscharts.js之后再加载jscharts.plugin.mb.js；(独立包含文件的版本)
以上两步任选其一，页面必须编码为UTF-8，
若使用带有中文的xml数据，则xml数据源的编码也要转为UTF-8并且加入encoding="UTF-8"标签；
之后如果要让JSCharts支持中文字符显示，则在生成一个JSChart实例之后紧跟着执行一个函数patchMbString()，如：
var myChart = new JSChart('graph', 'pie');
myChart.patchMbString();
// 接下来的代码和以前一样
如果不执行patchMbString则和原来的没有区别，
此外还加入一个新方法 setFontFamily 用于自定义显示图表的字体，如：
myChart.setFontFamily("微软雅黑"); // 设置显示字体为微软雅黑
另外JSChart默认的字体大小只有8px，如果要较清晰地显示中文的话还得加大字号，
这个用自带的接口就可以了，如：
myChart.setAxisValuesFontSize(9); // 设置柱状图和线条图的标尺字体大小为9px
myChart.setPieUnitsFontSize(10); // 设置饼图的项目标识字体大小为10px
代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Demo2.aspx.cs" Inherits="Demo2" %>
<!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 id="Head1" runat="server">
<title></title>
<script src="scripts/jquery-1.2.6.js" type="text/javascript"></script>
<script src="scripts/jscharts.js" type="text/javascript" ></script>
<script src="scripts/jscharts.plug.mb.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btnShow").click(function() {
var BuildDiagram = function() {
$.getScript("HandleAuthorStateInfo.aspx", function(data) {
//var colors = ['#CE0000', '#EF2323', '#D20202'];
var myChart = new JSChart('graph', 'bar');
myChart.patchMbString();
myChart.setDataArray(myData);
//myChart.colorizeBars(colors);
myChart.setDataArray(myData);
myChart.setTitle("作者地区分布图");
myChart.setAxisColor('#9D9F9D'); //设置x|y轴的颜色
myChart.setAxisWidth(1); //设置x|y轴的宽度
myChart.setAxisNameX('地区'); //x轴的文字
myChart.setAxisNameY('作者'); //y轴的文字
myChart.setAxisNameColor('#655D5D'); //x|y轴的文字的颜色
myChart.setAxisNameFontSize(9); //x|y轴的文字的大小
//myChart.setAxisPaddingLeft(0); //x轴的左边距
myChart.setAxisValuesDecimals(1); //设置数字的小数点后的位数
myChart.setAxisValuesColor('#9C1919'); //设置x|y轴的数字颜色
//myChart.setTextPaddingLeft(0); //设置y轴文字的左边距
//myChart.setAxisPaddingBottom(30);
//myChart.setAxisPaddingLeft(30);
//myChart.setAxisPaddingRight(170);
//myChart.setAxisPaddingTop(30);
myChart.setBarValuesColor('#9C1919'); //设置bar数据的颜色
myChart.setBarBorderWidth(0); //设置bar边框大小
myChart.setTitleColor('#8C8382'); //设置标题文字的颜色
myChart.setGridColor('#5D5F5D'); //设置内部GridView的颜色
// myChart.setBackgroundColor('#efe');
myChart.setSize(616, 321);
myChart.setBackgroundImage('images/chart_bg.jpg');
myChart.draw();
});
};
$("#graph").show(1000, BuildDiagram);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="Id" DataSourceID="SqlDataSource1" EmptyDataText="没有可显示的数据记录。">
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id" ReadOnly="True"
SortExpression="Id" />
<asp:BoundField DataField="Au_Id" HeaderText="Au_Id" SortExpression="Au_Id" />
<asp:BoundField DataField="Au_Lname" HeaderText="Au_Lname"
SortExpression="Au_Lname" />
<asp:BoundField DataField="Au_Fname" HeaderText="Au_Fname"
SortExpression="Au_Fname" />
<asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" />
<asp:BoundField DataField="Addr" HeaderText="Addr" SortExpression="Addr" />
<asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
<asp:BoundField DataField="State" HeaderText="State" SortExpression="State" />
<asp:BoundField DataField="Zip" HeaderText="Zip" SortExpression="Zip" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:JQuerySimpleDBConnectionString1 %>"
DeleteCommand="DELETE FROM [Author] WHERE [Id] = @Id"
InsertCommand="INSERT INTO [Author] ([Au_Id], [Au_Lname], [Au_Fname], [Phone], [Addr], [City], [State], [Zip]) VALUES (@Au_Id, @Au_Lname, @Au_Fname, @Phone, @Addr, @City, @State, @Zip)"
ProviderName="<%$ ConnectionStrings:JQuerySimpleDBConnectionString1.ProviderName %>"
SelectCommand="SELECT [Id], [Au_Id], [Au_Lname], [Au_Fname], [Phone], [Addr], [City], [State], [Zip] FROM [Author]"
UpdateCommand="UPDATE [Author] SET [Au_Id] = @Au_Id, [Au_Lname] = @Au_Lname, [Au_Fname] = @Au_Fname, [Phone] = @Phone, [Addr] = @Addr, [City] = @City, [State] = @State, [Zip] = @Zip WHERE [Id] = @Id">
<DeleteParameters>
<asp:Parameter Name="Id" Type="Int32" />
</DeleteParameters>
<InsertParameters>
<asp:Parameter Name="Au_Id" Type="String" />
<asp:Parameter Name="Au_Lname" Type="String" />
<asp:Parameter Name="Au_Fname" Type="String" />
<asp:Parameter Name="Phone" Type="String" />
<asp:Parameter Name="Addr" Type="String" />
<asp:Parameter Name="City" Type="String" />
<asp:Parameter Name="State" Type="String" />
<asp:Parameter Name="Zip" Type="String" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="Au_Id" Type="String" />
<asp:Parameter Name="Au_Lname" Type="String" />
<asp:Parameter Name="Au_Fname" Type="String" />
<asp:Parameter Name="Phone" Type="String" />
<asp:Parameter Name="Addr" Type="String" />
<asp:Parameter Name="City" Type="String" />
<asp:Parameter Name="State" Type="String" />
<asp:Parameter Name="Zip" Type="String" />
<asp:Parameter Name="Id" Type="Int32" />
</UpdateParameters>
</asp:SqlDataSource>
</div>
<div><input type="button" id="btnShow" value="显示图表" /></div>
<div id="graph" style="display:none" ></div>
</form>
</body>
</html>
显示中文：
