DevExpress XtraCharts 动态更新图表与X轴刻度间距调整
要点：必须使用ClientEvent触发，若使用其它控件事件触发，无法更新图表。
View Code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MinuteChart.aspx.cs" Inherits="TemperatureMonitor.Web.Detector.Charts.MinuteChart" %> <%@ Register TagPrefix="dxm" Namespace="DevExpress.Web.ASPxMenu" Assembly="DevExpress.Web.v11.2, Version=11.2.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" %> <%@ Register TagPrefix="dxchartsui" Namespace="DevExpress.XtraCharts.Web" Assembly="DevExpress.XtraCharts.v11.2.Web, Version=11.2.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" %> <%@ Register TagPrefix="dx" Namespace="DevExpress.Web.ASPxRoundPanel" Assembly="DevExpress.Web.v11.2, Version=11.2.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" %> <%@ Register TagPrefix="dx" Namespace="DevExpress.Web.ASPxPanel" Assembly="DevExpress.Web.v11.2, Version=11.2.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" %> <%@ Register TagPrefix="dxe" Namespace="DevExpress.Web.ASPxEditors" Assembly="DevExpress.Web.ASPxEditors.v11.2, Version=11.2.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" %> <%@ Register TagPrefix="dx" Namespace="DevExpress.Web.ASPxEditors" Assembly="DevExpress.Web.ASPxEditors.v11.2, Version=11.2.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" %> <%@ Register TagPrefix="dxcharts" Namespace="DevExpress.XtraCharts" Assembly="DevExpress.XtraCharts.v11.2, Version=11.2.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <dx:ASPxRoundPanel ID="ASPxRoundPanel1" runat="server" Width="100%" ShowHeader="False"> <PanelCollection> <dx:PanelContent ID="PanelContent1" runat="server"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td> 探头[ <dxe:ASPxLabel runat="server" ID="txtID" Text="0"/> ] </td> <td> <dxe:ASPxDateEdit ID="txtDate" ClientInstanceName="txtDate" Width="100" runat="server" EditFormat="Custom" EditFormatString="yyyy-MM-dd" AutoPostBack="False"> <ClientSideEvents ValueChanged="function(s, e) {chartHumi.PerformCallback();chartTemp.PerformCallback();}"></ClientSideEvents> </dxe:ASPxDateEdit> </td> <td> <dx:ASPxSpinEdit ID="txtHourStart" ClientInstanceName="txtHourStart" runat="server" Width="60px" MinValue="0" MaxValue="23" NullText="8" AutoPostBack="False"> <ClientSideEvents ValueChanged="function(s, e) {chartHumi.PerformCallback();chartTemp.PerformCallback();}"></ClientSideEvents> </dx:ASPxSpinEdit> </td> <td> 到 </td> <td> <dx:ASPxSpinEdit ID="txtHourEnd" ClientInstanceName="txtHourEnd" runat="server" Width="60px" MinValue="0" MaxValue="23" NullText="18" AutoPostBack="False"> <ClientSideEvents ValueChanged="function(s, e) {chartHumi.PerformCallback();chartTemp.PerformCallback();}"></ClientSideEvents> </dx:ASPxSpinEdit> </td> <td> 时的数据 </td> </tr> </table> </dx:PanelContent> </PanelCollection> </dx:ASPxRoundPanel> <br/> <dxchartsui:WebChartControl ID="ChartHumidity" ClientInstanceName="chartHumi" runat="server" Height="160px" Width="1000px" OnCustomCallback="HumiChartCustomCallback"> <DiagramSerializable> <dxcharts:SwiftPlotDiagram LabelsResolveOverlappingMinIndent="1"> <AxisX Title-Text="Date" VisibleInPanesSerializable="-1" GridSpacingAuto="False" GridSpacing="0.5" MinorCount="5" DateTimeMeasureUnit="Minute" DateTimeGridAlignment="Hour"> <Range SideMarginsEnabled="False"></Range> <GridLines Visible="True"></GridLines> <DateTimeOptions Format="Custom" FormatString="HH:mm"></DateTimeOptions> </AxisX> <AxisY Title-Text="湿度, %" Title-Visible="True" VisibleInPanesSerializable="-1"> <Range AlwaysShowZeroLevel="False" SideMarginsEnabled="True"></Range> </AxisY> </dxcharts:SwiftPlotDiagram> </DiagramSerializable> </dxchartsui:WebChartControl> <dxm:ASPxMenu SkinID="ChartDemoToolbar" ID="mnuToolbar1" runat="server" ClientInstanceName="mnuToolbar"> <Items> <dxm:MenuItem Name="mnuSaveToDisk" Text="" ToolTip="导出图表并保存" BeginGroup="True"> <Image Url="/Images/Toolbar/BtnSave.png" /> </dxm:MenuItem> <dxm:MenuItem Name="mnuSaveToWindow" Text="" ToolTip="在线打开图表"> <Image Url="/Images/Toolbar/BtnSaveWindow.png" /> </dxm:MenuItem> <dxm:MenuItem Name="mnuFormat"><Template> <dxe:ASPxComboBox runat="server" Width="60px" ValueType="System.String" ID="cbFormat" SelectedIndex="0" ClientInstanceName="cbFormat"> <Items> <dxe:ListEditItem Value="png" Text="png" /> <dxe:ListEditItem Value="pdf" Text="pdf" /> <dxe:ListEditItem Value="xls" Text="xls" /> </Items> </dxe:ASPxComboBox> </Template></dxm:MenuItem> </Items> <ClientSideEvents ItemClick="function(s, e) { if (e.item.name == 'mnuSaveToDisk') chartHumi.SaveToDisk(cbFormat.GetText()); if (e.item.name == 'mnuSaveToWindow') chartHumi.SaveToWindow(cbFormat.GetText()); }" /> </dxm:ASPxMenu> <br/> <dxchartsui:WebChartControl ID="ChartTemperature" ClientInstanceName="chartTemp" runat="server" Height="160px" Width="1000px" OnCustomCallback="TempChartCustomCallback"> <DiagramSerializable> <dxcharts:SwiftPlotDiagram LabelsResolveOverlappingMinIndent="1"> <AxisX Title-Text="Date" VisibleInPanesSerializable="-1" GridSpacingAuto="False" GridSpacing="0.5" MinorCount="5" DateTimeMeasureUnit="Minute" DateTimeGridAlignment="Hour"> <Range SideMarginsEnabled="False"></Range> <GridLines Visible="True"></GridLines> <DateTimeOptions Format="Custom" FormatString="HH:mm"></DateTimeOptions> </AxisX> <AxisY Title-Text="温度, °C" Title-Visible="True" VisibleInPanesSerializable="-1"> <Range AlwaysShowZeroLevel="False" SideMarginsEnabled="True"></Range> </AxisY> </dxcharts:SwiftPlotDiagram> </DiagramSerializable> </dxchartsui:WebChartControl> <dxm:ASPxMenu SkinID="ChartDemoToolbar" ID="mnuToolbar" runat="server" ClientInstanceName="mnuToolbar"> <Items> <dxm:MenuItem Name="mnuSaveToDisk" Text="" ToolTip="导出图表并保存" BeginGroup="True"> <Image Url="/Images/Toolbar/BtnSave.png" /> </dxm:MenuItem> <dxm:MenuItem Name="mnuSaveToWindow" Text="" ToolTip="在线打开图表"> <Image Url="/Images/Toolbar/BtnSaveWindow.png" /> </dxm:MenuItem> <dxm:MenuItem Name="mnuFormat"><Template> <dxe:ASPxComboBox runat="server" Width="60px" ValueType="System.String" ID="cbFormat" SelectedIndex="0" ClientInstanceName="cbFormat"> <Items> <dxe:ListEditItem Value="png" Text="png" /> <dxe:ListEditItem Value="pdf" Text="pdf" /> <dxe:ListEditItem Value="xls" Text="xls" /> </Items> </dxe:ASPxComboBox> </Template></dxm:MenuItem> </Items> <ClientSideEvents ItemClick="function(s, e) { if (e.item.name == 'mnuSaveToDisk') chartTemp.SaveToDisk(cbFormat.GetText()); if (e.item.name == 'mnuSaveToWindow') chartTemp.SaveToWindow(cbFormat.GetText()); }" /> </dxm:ASPxMenu> </form> </body> </html>
刻度间距调整，需添加DiagramSerializable子标签
<DiagramSerializable> <dxcharts:SwiftPlotDiagram LabelsResolveOverlappingMinIndent="1"> <AxisX Title-Text="Date" VisibleInPanesSerializable="-1" GridSpacingAuto="False" GridSpacing="0.5" MinorCount="5" DateTimeMeasureUnit="Minute" DateTimeGridAlignment="Hour"> <Range SideMarginsEnabled="False"></Range> <GridLines Visible="True"></GridLines> <DateTimeOptions Format="Custom" FormatString="HH:mm"></DateTimeOptions> </AxisX> <AxisY Title-Text="湿度, %" Title-Visible="True" VisibleInPanesSerializable="-1"> <Range AlwaysShowZeroLevel="False" SideMarginsEnabled="True"></Range> </AxisY> </dxcharts:SwiftPlotDiagram> </DiagramSerializable>
注：
1、DateTimeMeasureUnit表示刻度单位
2、DateTimeGridAlignment表示刻度间距的单位
3、要想正确的使日期自动调整，Series 的 ArgumentScaleType 属性需设置为 ScaleType.DateTime;
