设置Asp：Chart控件的动态大小

我正在尝试使图表的宽度和高度动态变化,但无法使其正常工作.到目前为止,我已经尝试过：

我已将图表设置在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(Panel1.Height为40％和40).

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

解决方法:

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

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

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

至于设置图表的宽度和高度,有一个陷阱：在将页面加载到浏览器中之前,面板的实际大小不可用.之后,您可以使用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);
    }
}

【说明】：本文章由站长整理发布，文章内容不代表本站观点，如文中有侵权行为，请与本站客服联系(QQ:254677821)！