zoukankan      html  css  js  c++  java

  • 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"/>
                        ]&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;
  • 相关阅读:
    Two Sum II
    Subarray Sum
    Intersection of Two Arrays
    Reorder List
    Convert Sorted List to Binary Search Tree
    Remove Duplicates from Sorted List II
    Partition List
    Linked List Cycle II
    Sort List
    struts2结果跳转和参数获取
  • 原文地址：https://www.cnblogs.com/blackice/p/2660926.html
Copyright © 2011-2022 走看看