爲Asp：Chart控件設置動態大小

Question

我想讓我的圖表寬度和高度動態化，但是我無法使其工作。到目前爲止，我嘗試過：

我已經在Asp：Panel中設置了圖表，並給出了面板所需的百分比值。

<asp:Panel ID="Panel1" runat="server" Width="90%" Height="40%"> 
     <asp:Chart ID="Chart1" runat="server" CssClass="chart"> 
      <Series> 
       <asp:Series Name="Series1"></asp:Series> 
      </Series> 
      <ChartAreas> 
       <asp:ChartArea Name="ChartArea1"></asp:ChartArea> 
      </ChartAreas> 
     </asp:Chart> 
    </asp:Panel> 

然後我嘗試分配在我的C＃代碼

Chart1.Width = Panel1.Width; 
    Chart1.Height = Panel1.Height; 

然而這產生一個異常的那些值的圖表，作爲圖表接收所述百分比值代替的像素的量的。我也試過（int）Panel.Width.Value無濟於事。

我試着用CSS做它，擺弄位置：絕對和其他屬性，但我可以讓它爲面板但不適用於圖表。

任何人都可以啓發我一個簡單的解決方案，不需要進入JQuery等？

編輯：

的的可變值Panel1.Width將輸出90％而Panel1.Width.Value意願出於某種原因輸出（40％和對於Panel1.Height）。

Chart1.Width.Value將不得不由Visual Studio分配的300像素的默認值，因此：

Chart1.Width = new Unit(Chart1.Width.Value * Panel1.Width.Value/100, UnitType.Pixel); 

將輸出一樣的，如果我是這樣做：

Chart1.Width = new Unit(300 * 90/100, UnitType.Pixel); 

輸出：靜態值爲270px

我需要檢索像素值b y中的比例Panel1.Width，但我想不出這樣做的一種方式，

編輯2：

圖表拉伸位用CSS工作正常，但輸出是有點給人留下深刻印象，所以我想以使JavaScript示例工作，但我有沒有成功......我增加了一個按鈕強制回傳和在Page_Load事件我插入：

protected void Page_Load(object sender, EventArgs e) 
{ 
    if (IsPostBack) 
    { 
     if (panelWidth.Value != "" && panelHeight.Value != "") 
     { 
      Chart1.Visible = true; 
      Chart1.Width = int.Parse(panelWidth.Value); 
      Chart1.Height = int.Parse(panelHeight.Value); 
     } 
    } 
    else //Initialize the chart with some sample points 
    { 
     Chart1.Series[0].Points.AddXY(1, 1); 
     Chart1.Series[0].Points.AddXY(1, 2); 
     Chart1.Series[0].Points.AddXY(2, 1); 
     Chart1.Series[0].Points.AddXY(2, 2); 
     Chart1.Series[0].Points.AddXY(3, 1); 
     Chart1.Series[0].Points.AddXY(3, 2); 
    } 
} 

如果我開始頁圖表顯然是不可見，所以我還加了一個按鈕

<asp:Button ID="Button1" runat="server" Text="Button" /> 

以觸發回傳的形式，它會重新加載頁面，但panelWidth.Value和panelHeight.Value仍爲空。我錯過了什麼嗎？好像我無法觸發javascript代碼：/

Answer 1

您可以使用CSS樣式來確保圖表填充面板。在瀏覽器窗口調整大小時，圖表元素（HTML輸出中的圖像）將被拉伸或壓縮。

<style> 
    html, body, form 
    { 
     height: 100%; 
    } 

    .chart 
    { 
     width: 100% !important; 
     height: 100% !important; 
    } 
</style> 

至於設置Width和圖表Height，有一個問題：直到頁面已加載到瀏覽器面板的實際尺寸不可用。之後，您可以使用Javascript代碼獲取大小，並將值存儲在隱藏字段中，然後在代碼後面可用。

您可能會在第一次加載頁面時觸發回發，將圖表調整爲面板大小。爲了使調整動態化，每當窗口大小改變一定量時，可以觸發其他回發。在UpdatePanel的幫助下，可以減少回發的視覺影響。

<asp:ScriptManager ID="scriptManager1" runat="server" /> 
<asp:HiddenField ID="panelWidth" runat="server" Value="" /> 
<asp:HiddenField ID="panelHeight" runat="server" Value="" /> 
<asp:UpdatePanel ID="UpdatePanel1" runat="server" style="width: 90%; height: 40%"> 
    <ContentTemplate> 
     <asp:Chart ID="Chart1" runat="server" CssClass="chart" Visible="false"> 
      <Series> 
       <asp:Series Name="Series1"></asp:Series> 
      </Series> 
      <ChartAreas> 
       <asp:ChartArea Name="ChartArea1"></asp:ChartArea> 
      </ChartAreas> 
     </asp:Chart> 
     <asp:Button ID="btnPostBack" runat="server" Style="display: none" /> 
    </ContentTemplate> 
</asp:UpdatePanel> 

<script type="text/javascript"> 
    (function() { 
     var panel = document.getElementById('<%= UpdatePanel1.ClientID %>'); 
     var panelWidth = document.getElementById('<%= panelWidth.ClientID %>'); 
     var panelHeight = document.getElementById('<%= panelHeight.ClientID %>'); 
     var initialWidth = panel.offsetWidth; 
     var initialHeight = panel.offsetHeight; 

     function getChangeRatio(val1, val2) { 
      return Math.abs(val2 - val1)/val1; 
     }; 

     function redrawChart() { 
      setTimeout(function() { 
       initialWidth = panel.offsetWidth; 
       initialHeight = panel.offsetHeight; 
       document.getElementById('<%= btnPostBack.ClientID %>').click(); 
      }, 0); 
     }; 

     function savePanelSize() { 
      var isFirstDisplay = panelWidth.value == ''; 
      panelWidth.value = panel.offsetWidth; 
      panelHeight.value = panel.offsetHeight; 
      var widthChange = getChangeRatio(initialWidth, panel.offsetWidth); 
      var heightChange = getChangeRatio(initialHeight, panel.offsetHeight); 
      if (isFirstDisplay || widthChange > 0.2 || heightChange > 0.2) { 
       redrawChart(); 
      } 
     }; 

     savePanelSize(); 
     window.addEventListener('resize', savePanelSize, false); 
    })(); 
</script> 

JavaScript函數savePanelSize加載後和調整窗口後調用。隱藏字段中的空值表示圖表首次顯示，其大小必須在代碼後面設置。當窗口大小變化超過20％時，也需要重畫。隱藏按鈕btnPostBack用於以編程方式觸發回發。

在後面的代碼，圖表的寬度和高度被設置爲面板的尺寸：

protected void Page_Load(object sender, EventArgs e) 
{ 
    if (panelWidth.Value != "" && panelHeight.Value != "") 
    { 
     Chart1.Visible = true; 
     Chart1.Width = int.Parse(panelWidth.Value); 
     Chart1.Height = int.Parse(panelHeight.Value); 
    } 
}