DevExpress XtraCharts 动态更新图表与X轴刻度间距调整

本文转载自查看原文 2012-08-28 22:03 4070 C#

要点：必须使用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"/>
                        ]&nbsp;
                    </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>
                            &nbsp;到&nbsp;
                    </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>
                            &nbsp;时的数据
                    </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="温度, &#176;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;

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 DevExpress20：XtraCharts控件实现图表 ggplot2绘图调整x轴、y轴标签及刻度标签的大小 ggplot2绘图调整x轴y轴粗细及刻度粗细 EChart 标题 title 样式，x轴、y轴坐标显示，调整图表位置等 EChart 标题 title 样式，x轴、y轴坐标显示，调整图表位置等 matlab指定坐标轴刻度间距xtick echart去掉x轴外围的刻度线 highcharts x轴中文刻度太长换行 echarts图表x轴文字显示不全问题及柱状图颜色调整 echarts 图表X轴加滚动条，调整柱子间隙和宽度