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 会因某种原因输出 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);

OUTPUT：静态值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);
    }
}

为Asp设置动态大小：图表控件

1 个答案: