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;
  • 相关阅读:
    Python入门篇-解析式、生成器
    使用Kerberos进行Hadoop认证
    Python标准库-datatime和time
    使用Cloudera Manager部署HUE
    使用Cloudera Manager部署oozie
    使用Cloudera Manager部署Spark服务
    HDFS重启集群导致数据损坏，使用fsck命令修复过程
    关系型数据的收集
    使用Cloudera Manager搭建Kudu环境
    分布式结构化存储系统-Kudu简介
  • 原文地址：https://www.cnblogs.com/blackice/p/2660926.html
Copyright © 2011-2022 走看看