为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); 
    } 
}