devexpress 中的chart(图表)根据窗口大小缩放

chart 的宽高设置后并不能和当前浏览器窗口等比例缩放，后来发现这个是在服务器端渲染的这里可以通过f12里边的网络来查看

不能在客户端操做，但是又要根据客户端的宽高来确定 chart

的宽高这个就是要求页面在加载时调用后台在窗口大小发生改变的时候也要去调用后台

aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestChart.aspx.cs" Inherits="Q6JobWeb.TestChart" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript">

        function Resized() {
            //var callbackState = window.document.form1.elements['callbackState'].value;
            var callbackState = $("#callbackState").val();
            if (callbackState == 0)
                DoCallback();
        }

        function DoCallback() {
            //window.document.form1.elements['chartWidth'].value = document.body.offsetWidth;
            $("#chartWidth").val(document.body.offsetWidth);
            console.log($("#chartWidth").val());
            chart.PerformCallback();//调用后台
        }

        function ResizeChart(s, e) {
            //window.document.form1.elements['callbackState'].value = 0;

            $("#callbackState").val("0");
            //s.GetMainElement().style.width = window.document.form1.elements['chartWidth'].value + "px";
            s.GetMainElement().style.width = $("#chartWidth").val() + "px";
        }

        function ResetCallbackState() {
            //window.document.form1.elements['callbackState'].value = 1;
            $("#callbackState").val("1");
        }
    </script>
</head>
<body onresize="Resized()" onload="DoCallback()">
    <form id="form1" runat="server">
        <div>
            <dxe:WebChartControl ID="WebChartControl1" OnCustomCallback="WebChartControl1_CustomCallback" runat="server" ClientInstanceName="chart" Height="387px" Width="900px" SettingsLoadingPanel-ShowImage="false">
                <SeriesSerializable>
                    <dxe:Series Name="Series 1">
                        <Points>
                            <dxe:SeriesPoint Values="1" Argument="A"></dxe:SeriesPoint>
                            <dxe:SeriesPoint Values="2" Argument="B"></dxe:SeriesPoint>
                            <dxe:SeriesPoint Values="3" Argument="C"></dxe:SeriesPoint>
                            <dxe:SeriesPoint Values="4" Argument="D"></dxe:SeriesPoint>
                            <dxe:SeriesPoint Values="5" Argument="E"></dxe:SeriesPoint>
                            <dxe:SeriesPoint Values="6" Argument="F"></dxe:SeriesPoint>
                            <dxe:SeriesPoint Values="7" Argument="G"></dxe:SeriesPoint>
                            <dxe:SeriesPoint Values="8" Argument="H"></dxe:SeriesPoint>
                            <dxe:SeriesPoint Values="9" Argument="I"></dxe:SeriesPoint>
                            <dxe:SeriesPoint Values="10" Argument="J"></dxe:SeriesPoint>
                        </Points>
                    </dxe:Series>
                </SeriesSerializable>
                <ClientSideEvents EndCallback="function(s, e) {ResizeChart(s,e);}" BeginCallback="function(s, e) {ResetCallbackState();}" />
            </dxe:WebChartControl>
            <input id="chartWidth" type="hidden" runat="server" value="387" />
            <input id="callbackState" type="hidden" runat="server" value="0" />
        </div>
    </form>
</body>
</html>

cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Q6JobWeb
{
    public partial class TestChart : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            this.WebChartControl1.Width = new Unit(Convert.ToInt32(chartWidth.Value));
        }

        protected void WebChartControl1_CustomCallback(object sender, DevExpress.XtraCharts.Web.CustomCallbackEventArgs e)
        {
            this.WebChartControl1.Width = new Unit(Convert.ToInt32(chartWidth.Value));
        }

    }
}