为Asp:Chart控件设置动态尺寸 [英] Setting a dynamic size for an Asp:Chart control

问题描述

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

I am trying to make my chart width and height dynamic but I can't get it to work. So far what I've tried:

我已将图表设置在Asp:Panel内，并为面板提供了所需的百分比值.

I've set the Chart inside an Asp:Panel and given the panel the desired percentual values.

    <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#代码中的图表

Then I try to assign those values to the chart in my C# code

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

但是，这会产生异常，因为图表接收的是百分比值而不是像素数量.我也尝试(int)Panel.Width.Value 无济于事.

This however generates an exception, as the chart is receiving the percentual value instead of the amount of pixels. I also tried (int)Panel.Width.Value to no avail.

我也尝试使用CSS进行操作，摆弄position:absolute和其他属性，但同样，我可以使它适用于面板而不适用于图表.

I tried doing it with CSS as well, fiddling around with position:absolute and other attributes, but again, I can get it to work for a panel but not for a chart.

有人能用一种不需要进入JQuery之类的简单解决方案来启发我吗?

Could anyone enlighten me with a simple solution which won't require getting into JQuery and such?

Panel1.Width 的变量值将输出 90％，而 Panel1.Width.Value 出于某种原因将输出 90( Panel1.Height 的 40％和 40 ).

The variable value of Panel1.Width will output 90% while Panel1.Width.Value will for some reason output 90 (40% and 40 for Panel1.Height).

Chart1.Width.Value 将具有Visual Studio分配的默认值300px，因此:

Chart1.Width.Value will have a default value of 300px assigned by Visual Studio, therefore:

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

将输出与我要做的输出相同的结果:

will output the same as if I were to do:

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

输出:静态值为270px

OUTPUT: a static value of 270px

我需要获取通过Panel1.Width百分比检索的像素值，但是我不知道该怎么做

I NEED to get the pixel value retrieved by the Panel1.Width percentage, but I can't figure out a way of doing that

使用CSS拉伸图表的图表可以正常工作，但是输出结果有点让人不知所措，所以我试图使javascript示例正常工作，但是我没有成功...我添加了一个按钮来强制回发，并在我插入的page_load事件:

The chart stretching bit with css works correctly but the output is a bit underwhelming, so I am trying to to make the javascript example work but I am having no success... I added a button to force a postback and in the page_load event I inserted:

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

如果我启动该页面，则该图表显然不可见，因此我还添加了一个按钮

If I start the page the chart is obviously not visible, so I also added a button

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

到表单以触发回发，这确实会重新加载页面，但是panelWidth.Value和panelHeight.Value仍然为空.我想念什么吗?似乎我无法触发javascript代码:/

to the form to trigger a postback, which does reload the page but the panelWidth.Value and panelHeight.Value are still empty. Am I missing something? Seems like I can't trigger the javascript code :/

推荐答案

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

You can use CSS styles to make sure that the chart fills the panel. The chart element, which is an image in the HTML output, will be stretched or compressed when the browser window is resized.

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

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

至于设置图表的 Width 和 Height ，有一个陷阱:除非将页面加载到页面中，否则面板的实际大小不可用.浏览器.之后，您可以使用Javascript代码获取大小并将值存储在隐藏字段中，然后在后面的代码中找到它们.

As for setting the Width and Height of the chart, there is a catch: the actual size of the panel is not available until the page has been loaded in the browser. After that, you can get the size with Javascript code and store the values in hidden fields, which are then available in code behind.

您可以在页面首次加载时触发回发，以将图表调整为面板大小.为了使调整动态化，每当窗口大小改变一定量时，便会触发其他回发.借助UpdatePanel，可以减少回发的视觉影响.

You could trigger a postback the first time the page has loaded, to adjust the chart to the size of the panel. To make the adjustment dynamic, other postbacks could be triggered every time the window size changes by a certain amount. With the help of an UpdatePanel, the visual impact of the postbacks can be reduced.

<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 用于以编程方式触发回发.

The Javascript function savePanelSize is called after loading and after resizing the window. Empty values in the hidden fields indicate that the chart is displayed for the first time and that its size must be set in code behind. A redraw is also needed when the window size changes by more than 20%. The hidden button btnPostBack is used to trigger postbacks programmatically.

在后面的代码中，图表的宽度和高度设置为面板的大小:

In code behind, the width and height of the chart are set to the size of the panel:

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

这篇关于为Asp:Chart控件设置动态尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！