devexpress 中的chart(圖表)根據窗口大小縮放

時間 2019-11-08

標籤 devexpress chart 圖表根據窗口大小縮放简体版

原文原文鏈接

chart 的寬高設置後並不能和當前瀏覽器窗口等比例縮放，後來發現這個是在服務器端渲染的這裏能夠經過f12裏邊的網絡來查看 javascript

不能在客戶端操作，可是又要根據客戶端的寬高來肯定 chartcss

的寬高這個就是要求頁面在加載時調用後臺在窗口大小發生改變的時候也要去調用後臺html

aspx:java

<%@ 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:jquery

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

    }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。