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