为 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 来做，摆弄 position:absolute 和其他属性，但同样，我可以让它在面板上工作，但不能在图表上工作。

谁能告诉我一个不需要进入 JQuery 等的简单解决方案？

编辑：

Panel1.Width 的变量值会输出 90% 而 Panel1.Width.Value 会出于某种原因输出 90 （40% 和 40 用于 Panel1.Height）。

Chart1.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 百分比检索到的像素值，但我想不出办法

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