在进行到服务器的往返（我查询数据库并返回一些json）后，我需要帮助更新网页中的（高图）图表。我正在绘制热图。页面加载时一切正常。我没有成功地在下拉列表中获得用户的选择以触发另一次往返并重新绘制图表。
我不清楚编写代码的位置（clientside或serverside）。到目前为止我的代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" TagPrefix="ajax" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../Scripts/Highcharts-4.0.1/js/highcharts.js" type="text/javascript"></script>
<script src="../Scripts/Highcharts-4.0.1/js/modules/heatmap.js" type="text/javascript"></script>
<script src="../Scripts/Highcharts-4.0.1/js/modules/exporting.js" type="text/javascript"></script>
<script src="..Cesium/Build/Cesium/Cesium.js" type="text/javascript"></script>
<style type="text/css">
#divHeader { height:80px; width:100%; text-align:left; font-family:Tahoma, Arial; font-size:18px;}
.ddl { font-family:Tahoma, Arial; font-size:10px; font-weight:normal; color:#000; height:20px;
margin-bottom:1px; border:solid 1px #CCC; border-radius:2px; -moz-border-radius:2px;
-webkit-border-radius:2px; padding:1px; width:90px}
.optButton { font-family: Tahoma, Arial;font-size: 10px;font-weight: normal;color: #000; }
.thRight { text-align:right; }
.lblParams { text-align:right; font-family:Tahoma, Arial; font-size:10px;}
#divHeatMap { float:left; height: 300px; width: 49%; margin: 0 auto; border: 1px solid black; }
#divResilenceMap { position: relative; float:right; margin-left: 50%; height: 300px; width: 49%; margin: 0 auto; border: 1px solid blue; }
#divUsage { clear: both; height: 140px; min-width: 310px; max-width: 100%; border: 1px solid green; }
#divWorldMap { height: 300px; min-width: 310px; max-width: 100%; margin: 0 auto; border: 1px solid black; }
#divWaterfall { height: 140px; min-width: 310px; max-width: 100%; margin: 0 auto; border: 1px solid blue; }
#divGoogleEarth { height: 440px; min-width: 310px; max-width: 100%; margin: 0 auto; border: 1px solid black; }
#divDetails { float:right; position:absolute; left:150px; top:13px; background:#F7F7F9;
border:solid 1px #D6DBE1; color:#333; padding:5px}
#divContent { position:relative; top:-100px; left:180px; width:90%; }
#tabContainer { width:100%; }
</style>
<style>
@import url(../Cesium/build/Cesium/Widgets/widgets.css);
#cesiumContainer { position: absolute; top: 0; left: 0; height: 100%; width: 100%; margin: 0; overflow: hidden; padding: 0; font-family: sans-serif; }
html { height: 100%; }
body { padding: 0; margin: 0; overflow: hidden; height: 100%; }
</style>
<title></title>
</head>
<script type="text/javascript">
function refreshHeatMap()
{
$('#container').highcharts({
chart: { type: 'heatmap', marginTop: 40, marginBottom: 40 },
title: { text: 'Surface Tokens'},
xAxis: { categories: <%= volumes%>, title: 'Volumes' },
yAxis: { categories: <%= promiseTimes%>, title: 'Promise Times' },
colorAxis: { min: <%= minToken%>, minColor: '#FFFFFF', maxColor: Highcharts.getOptions().colors[0] },
legend: { align: 'right', layout: 'vertical', margin: 0, verticalAlign: 'top', y: 25, symbolHeight: 280 },
tooltip: { formatter: function () {
return 'Volume: ' + this.series.xAxis.categories[this.point.x]
+ '<br>PromiseTime: ' + this.series.yAxis.categories[this.point.y]
+ '<br>Profit: ' + this.point.value; } },
series: [{ name: 'Profit', borderWidth: 1,
data: <%= tokens%>}]
});
alert("heatmap refreshed!");
}
</script>
<script>
<!-- var viewer = new Cesium.Viewer('cesiumContainer'); -->
</script>
<body>
<form id="form1" runat="server">
<ajax:ToolkitScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"></ajax:ToolkitScriptManager>
<div id="divHeader" >
<table>
<tr><th><asp:Label ID="Label2" runat="server" Text="Global Supply Network Division"></asp:Label></th>
<td rowspan="2"><asp:Image ID="Image1" runat="server" ImageUrl="~/Images/ASCIcon.jpg" Height="55px" Width="55px" /></td></tr>
<tr><th><asp:Label ID="Label1" runat="server" Text="Assurance of Supply Center"></asp:Label></th></tr>
</table>
</div>
<asp:UpdatePanel ID="updtPnlMenu" runat="server" >
<ContentTemplate>
<table>
<tr><th class="thRight"><asp:Label ID="lblModel" runat="server" Text="Model" CssClass="lblParams"></asp:Label></th><td><asp:DropDownList ID="ddProducts" runat="server" OnTextChanged="ddProducts_TextChanged" AutoPostBack="true" CssClass="ddl"></asp:DropDownList></td></tr>
<tr><th class="thRight"><asp:Label ID="lblVolume" runat="server" Text="Volume" CssClass="lblParams"></asp:Label></th><td><asp:DropDownList ID="ddVolume" runat="server" CssClass="ddl"></asp:DropDownList></td></tr>
<tr><th class="thRight"><asp:Label ID="lblPromiseTime" runat="server" Text="PromiseTime" CssClass="lblParams"></asp:Label></th><td><asp:DropDownList ID="ddPromiseTime" runat="server" CssClass="ddl"></asp:DropDownList></td></tr>
<tr><th class="thRight"><asp:Label ID="lblWeighted" runat="server" Text="Res Weighted" CssClass="lblParams" ToolTip="Resilience Weighted"></asp:Label></th><td>
<asp:RadioButton ID="optWeighted" runat="server" Text="Yes" GroupName="RWP" CssClass="optButton" /><asp:RadioButton ID="optNotWeighted" runat="server" Text="No" GroupName="RWP" CssClass="optButton" /></td></tr>
</table>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddProducts" EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>
<div id="divContent">
<ajax:TabContainer ID="TabContainer" runat="server" Width="90%">
<ajax:TabPanel ID="TabPanel1" runat="server" HeaderText="Surfaces">
<ContentTemplate>
<div id="divHeatMap">Heatmap
<div id="container" style="height: 280px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
</div>
<div id="divResilenceMap">Resilience Map</div>
<div id="divUsage">Usage Charts</div>
</ContentTemplate>
</ajax:TabPanel>
<ajax:TabPanel ID="TabPanel2" runat="server" HeaderText="Financial">
<ContentTemplate>
<div id="divWorldMap">Worldmap</div>
<div id="divWaterfall">Waterfall Charts</div>
</ContentTemplate>
</ajax:TabPanel>
<ajax:TabPanel ID="TabPanel3" runat="server" HeaderText="Lanes">
<ContentTemplate>
<div id="cesiumContainer"></div>
</ContentTemplate>
</ajax:TabPanel>
</ajax:TabContainer>
</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Web.Script.Serialization;
public partial class Default2 : System.Web.UI.Page
{
Db db = new Db();
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack == true)
{
selProducts();
}
//ClientScript.RegisterStartupScript(this.GetType(), "selProduct", "refreshHeatMap();", true);
}
public void selProducts()
{
DataTable dt = db.selProducts();
ddProducts.DataSource = dt;
ddProducts.DataTextField = "Product";
ddProducts.DataValueField = "Product";
ddProducts.DataBind();
ddProducts.SelectedIndex = 0;
selVolumesAndPromiseTimes(ddProducts.Text);
}
protected void ddProducts_TextChanged(object sender, EventArgs e)
{
selVolumesAndPromiseTimes(ddProducts.Text);
}
private void selVolumesAndPromiseTimes(string prd)
{
DataSet ds = new DataSet();
if (db.selVolumesAndPromiseTimes(prd, ref ds) == false)
{
DataTable dtVol = ds.Tables["Volumes"];
ddVolume.DataSource = dtVol;
ddVolume.DataTextField = "Volume";
ddVolume.DataValueField = "Volume";
ddVolume.DataBind();
List<int> _lVol = new List<int>();
foreach (DataRow row in dtVol.Rows)
{
_lVol.Add(Convert.ToInt32(row["Volume"]));
}
JavaScriptSerializer jss1 = new JavaScriptSerializer();
volumes = jss1.Serialize(_lVol); //this make your list in jSON format like [88,99,10]
DataTable dtPromise = ds.Tables["PromiseTimes"];
ddPromiseTime.DataSource = dtPromise;
ddPromiseTime.DataTextField = "PromiseTime";
ddPromiseTime.DataValueField = "PromiseTime";
ddPromiseTime.DataBind();
List<int> _lPT = new List<int>();
foreach (DataRow row in dtPromise.Rows)
{
_lPT.Add(Convert.ToInt32(row["PromiseTime"]));
}
JavaScriptSerializer jss2 = new JavaScriptSerializer();
promiseTimes = jss2.Serialize(_lPT);
DataTable dtProfits = ds.Tables["Profits"];
List<List<int>> _tokens = new List<List<int>>();
Int32 minTkn = 999999; //start with a big number
foreach (DataRow row in dtProfits.Rows)
{
List<int> _lPft = new List<int>();
_lPft.Add(_lVol.IndexOf(Convert.ToInt32(row["Volume"])));
_lPft.Add(_lPT.IndexOf(Convert.ToInt32(row["PromiseTime"])));
Int32 mPft = Convert.ToInt32(row["Profit"]);
if (mPft < minTkn) { minTkn = mPft; }
_lPft.Add(mPft);
_tokens.Add(_lPft);
}
minToken = minTkn;
JavaScriptSerializer jss3 = new JavaScriptSerializer();
tokens = jss2.Serialize(_tokens);
//ClientScript.RegisterClientScriptBlock(this.GetType(), "selProduct", "refreshHeatMap()", true);
ClientScript.RegisterStartupScript(this.GetType(), "selProduct", "refreshHeatMap();", true);
}
}
public string volumes
{
get;
set;
}
public string promiseTimes
{
get;
set;
}
public string tokens
{
get;
set;
}
public Int32 minToken
{
get;
set;
}
}