zoukankan html css js c++ java

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

    }
}

查看全文

相关阅读:
C++学习笔记1——const
反转二叉树
 pywinauto 使用
 pywinauto 的使用
 爬虫基础知识
 mongdb安装配置
 pyinstaller
Python3.6+pyinstaller+Django
py2exe安装使用
 cx_freeze的安装使用

原文地址：https://www.cnblogs.com/zeng-qh/p/11279842.html