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軸加滾動條，調整柱子間隙和寬度