C# 为Asp:图表控件设置动态大小

我试图使我的图表宽度和高度动态，但我无法让它工作。到目前为止，我一直在尝试：

我在Asp:面板中设置了图表，并为面板提供了所需的百分比值

    <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>

但是，这会产生一个异常，因为图表接收的是百分比值而不是像素量。我还尝试了（int）Panel.Width.Value，但没有成功

我也尝试过使用CSS，摆弄position:absolute和其他属性，但同样，我可以让它在面板上工作，但不能在图表上工作

有没有人能给我一个简单的解决方案，不需要进入JQuery之类的程序

编辑：

Panel1.Width的变量值将输出90%，而Panel1.Width.value将出于某种原因输出90（Panel1.Height的40%和40）

图表1.Width.Value将由Visual Studio指定默认值300px，因此：

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

将输出与我要执行的相同的操作：

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

输出：270px的静态值

我需要获得Panel1.Width percentage检索到的像素值，但我想不出一种方法

编辑2：

使用css的图表拉伸位工作正常，但输出有点不令人满意，因此我试图使javascript示例工作正常，但没有成功。。。我添加了一个按钮来强制回发，并在我插入的页面加载事件中：

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代码：//

您可以使用CSS样式来确保图表填充面板。调整浏览器窗口的大小时，作为HTML输出中的图像的图表元素将被拉伸或压缩

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

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

---

将

Width=“100%”Height=“100%”

设置为图表时会发生什么情况？无法将百分比值设置为图表度量值，它不接受宽度或高度的任何百分比。是否将图表的dockstyle设置为“填充”无效？很抱歉，我在图表控件上找不到该属性？您是刚创建的吗？是否正在尝试使图表响应？也就是说，如果您调整浏览器窗口的大小，您是否希望图表的大小会发生变化？我无法使javascript代码正常工作，您能帮助我吗？我在问题的第二版中添加了详细信息，请确保标记和Javascript代码完全按照我的答案中当前显示的那样复制/粘贴到您的ASPX文件中，没有任何更改。Javascript代码块应该位于表单的末尾。如有必要，可以将标记和代码放在空项目中进行测试。您还可以添加类似于

alert（'I am here

）；`在Javascript代码中检查是否已执行。该图表应该显示和大小正确，而不必点击任何东西。啊，问题是js代码的位置，我有它的权利后，谢谢！

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

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

<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>

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