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

    }
}

相关阅读:
知物由学 | 未来安全隐患：AI的软肋——故意欺骗神经网络
 IT和非IT人士：2分钟了解什么是区块链
 追踪掠食者：地下灰产如何撸死创业公司？
机器学习、深度学习、和AI算法可以在网络安全中做什么？
一文了解安卓APP逆向分析与保护机制
 如何做好iOS应用安全？这有一把行之有效的“三板斧”
微服务化不同阶段 Kubernetes 的不同玩法
 从B站、爱奇艺、映客的IPO上市，看国内视频公司的内容审核现状
 知物由学 | 你的网络安全问题背后的真正原因
 感动到流泪！数据分析师的福音：跨视图粒度计算
原文地址：https://www.cnblogs.com/zeng-qh/p/11279842.html