Fatal编程技术网
  • asp.net/
  • Asp.net 如何在DevExpress BootstrapChart中分离不同窗格中的线系列组？

Asp.net 如何在DevExpress BootstrapChart中分离不同窗格中的线系列组？

asp.net charts devexpress

Asp.net 如何在DevExpress BootstrapChart中分离不同窗格中的线系列组？,asp.net,charts,devexpress,series,pane,Asp.net,Charts,Devexpress,Series,Pane,现在，我正在使用DevExpress BootstrapChart（v17.2.13.0）开发web应用程序，并将控件与对象数据源绑定。以下是用于在图形中显示的示例数据： 以下是我的目标： <dx:BootstrapChart ID="chart" ClientInstanceName="chart" runat="server" DataSourceID="ods_ChartData" Heigh

现在，我正在使用DevExpress BootstrapChart（v17.2.13.0）开发web应用程序，并将控件与对象数据源绑定。以下是用于在图形中显示的示例数据：

以下是我的目标：

<dx:BootstrapChart ID="chart" ClientInstanceName="chart" runat="server" 
    DataSourceID="ods_ChartData" Height="640px" TitleText="Chart Data" CrosshairEnabled="true" Panes="A,B">
    <ClientSideEvents Init="OnChartInit" />
    <SettingsToolTip Shared="true" Enabled="true" OnClientCustomizeTooltip="ChartToolTip" />
    <ArgumentAxis ArgumentType="System.DateTime" GridVisible="True" MinorGridVisible="True" 
        TickVisible="True" MinorTickVisible="True" TickInterval="1" MinorTickCount="3" TitleText="Date">
        <Label DisplayMode="Rotate" RotationAngle="-0" Format-Formatter="FormatDate" />
    </ArgumentAxis>
    <ValueAxisCollection>
        <dx:BootstrapChartValueAxis Pane="A" TitleText="ademand_im" />
        <dx:BootstrapChartValueAxis Pane="B" TitleText="rdemand_im" />
    </ValueAxisCollection>
    <SettingsCommonSeries Type="Line" ArgumentField="data_time" Point-Size="0" />
    <SettingsSeriesTemplate NameField="hardware_id" />
    <SeriesCollection>
        <dx:BootstrapChartLineSeries Pane="A" ValueField="ademand_im" />
        <dx:BootstrapChartLineSeries Pane="B" ValueField="rdemand_im" />
    </SeriesCollection>
</dx:BootstrapChart>
  • 该图将在不同的窗格中显示“ademand_im”和“rdemand_im”的值（我将它们命名为窗格“A”和“B”）
  • 每个窗格的X轴为“数据时间”（日期和时间），Y轴为值（“ademand\u im”或“rdemand\u im”）
  • 此外，每个窗格中的值将按“硬件id”分组，因此，在这种情况下，每个窗格中应该有两行序列“83245551”和“88310991”（注意，“硬件id”可以随时变化）
因此图表应该如下所示：

<dx:BootstrapChart ID="chart" ClientInstanceName="chart" runat="server" 
    DataSourceID="ods_ChartData" Height="640px" TitleText="Chart Data" CrosshairEnabled="true" Panes="A,B">
    <ClientSideEvents Init="OnChartInit" />
    <SettingsToolTip Shared="true" Enabled="true" OnClientCustomizeTooltip="ChartToolTip" />
    <ArgumentAxis ArgumentType="System.DateTime" GridVisible="True" MinorGridVisible="True" 
        TickVisible="True" MinorTickVisible="True" TickInterval="1" MinorTickCount="3" TitleText="Date">
        <Label DisplayMode="Rotate" RotationAngle="-0" Format-Formatter="FormatDate" />
    </ArgumentAxis>
    <ValueAxisCollection>
        <dx:BootstrapChartValueAxis Pane="A" TitleText="ademand_im" />
        <dx:BootstrapChartValueAxis Pane="B" TitleText="rdemand_im" />
    </ValueAxisCollection>
    <SettingsCommonSeries Type="Line" ArgumentField="data_time" Point-Size="0" />
    <SettingsSeriesTemplate NameField="hardware_id" />
    <SeriesCollection>
        <dx:BootstrapChartLineSeries Pane="A" ValueField="ademand_im" />
        <dx:BootstrapChartLineSeries Pane="B" ValueField="rdemand_im" />
    </SeriesCollection>
</dx:BootstrapChart>

然而，此时我唯一得到的是，要么直线序列显示在两个窗格中，但未分组，要么在图中未显示任何内容

这是我的代码：

<dx:BootstrapChart ID="chart" ClientInstanceName="chart" runat="server" 
    DataSourceID="ods_ChartData" Height="640px" TitleText="Chart Data" CrosshairEnabled="true" Panes="A,B">
    <ClientSideEvents Init="OnChartInit" />
    <SettingsToolTip Shared="true" Enabled="true" OnClientCustomizeTooltip="ChartToolTip" />
    <ArgumentAxis ArgumentType="System.DateTime" GridVisible="True" MinorGridVisible="True" 
        TickVisible="True" MinorTickVisible="True" TickInterval="1" MinorTickCount="3" TitleText="Date">
        <Label DisplayMode="Rotate" RotationAngle="-0" Format-Formatter="FormatDate" />
    </ArgumentAxis>
    <ValueAxisCollection>
        <dx:BootstrapChartValueAxis Pane="A" TitleText="ademand_im" />
        <dx:BootstrapChartValueAxis Pane="B" TitleText="rdemand_im" />
    </ValueAxisCollection>
    <SettingsCommonSeries Type="Line" ArgumentField="data_time" Point-Size="0" />
    <SettingsSeriesTemplate NameField="hardware_id" />
    <SeriesCollection>
        <dx:BootstrapChartLineSeries Pane="A" ValueField="ademand_im" />
        <dx:BootstrapChartLineSeries Pane="B" ValueField="rdemand_im" />
    </SeriesCollection>
</dx:BootstrapChart>
在这段代码中，如果我删除“setingsseriestemplate”行，数据将显示在两个窗格中，但在每个窗格中仅显示一行。但是，如果我保持这条线，图形将不会显示任何内容。

在我尝试了解此控件的工作原理后，我找到的唯一解决方案是，我必须将“hardware\u id”列转换为“ademand\u im”和“rdemand\u im”值，这可能不是理想的值

因此，不应该有“hardware_id”、“ademand_im”和“rdemand_im”列，而应该将表转换为“ademand_im_83245551”、“ademand_im_88310991”、“rdemand_im_83245551”和“rdemand_im_88310991”列

这是转换后的表的外观：

下面是我用来转换表的函数代码（VB.NET）：

之后，我必须在代码隐藏中手动添加图表系列，而不是在aspx文件中设置图表系列属性：

Private Sub chart_LoadProfile_DataBound(sender As Object, e As EventArgs) Handles chart_LoadProfile.DataBound
    Using ResultChartData
        Dim seriesList As List(Of String) = (From col As DataColumn In ResultChartData.Columns
                                                Where col.ColumnName <> "data_time"
                                                Order By col.ColumnName
                                                Select col.ColumnName
                                        ).ToList
        Dim hardWardCount As Integer = (From s In seriesList Where s.Contains("ademand_im_")).Count
        Dim showInLegend As Boolean = hardWardCount > 1
        With chart_LoadProfile.SeriesCollection
            .Clear()
            For i As Integer = 0 To seriesList.Count - 1
                Dim fieldName As String = seriesList(i)
                Dim hardwareId As String = seriesList(i).Split("_")(2)
                Dim series As New BootstrapChartLineSeries
                With series
                    .ArgumentField = "data_time"
                    .ValueField = fieldName
                    .Point.Size = 0
                    .ShowInLegend = showInLegend
                    If fieldName.Contains("ademand_im_") Then
                        .Pane = "A"
                        .Name = "kW - " & hardwareId
                    Else
                        .Pane = "B"
                        .Name = "kVar - " & hardwareId
                    End If
                End With
                .Add(series)
            Next
        End With
    End Using
End Sub

Private Sub chart\u LoadProfile\u DataBound（发送方作为对象，e作为事件参数）处理chart\u LoadProfile.DataBound
使用ResultChartData
Dim seriesList As List（字符串的）=（从列作为ResultChartData.Columns中的DataColumn
其中col.ColumnName“数据\时间”
按列名称排序
选择col.ColumnName
)托利斯先生
Dim hardWardCount As Integer=（从序列列表中的s开始，其中s.Contains（“ademand_im”））.Count
Dim showInLegend为布尔值=硬向计数>1
使用chart_LoadProfile.SeriesCollection
.Clear（）
对于i，整数=0到seriesList.Count-1
Dim字段名为字符串=系列列表（i）
Dim hardwareId作为字符串=系列列表（i）.Split（“”）（2）
Dim系列作为新的BootstrapChartLine系列
带系列
.ArgumentField=“数据\时间”
.ValueField=字段名
.Point.Size=0
.ShowInLegend=ShowInLegend
如果fieldName.Contains（“ademand_im_”）则
.Pane=“A”
.Name=“kW-”&hardwareId
其他的
.Pane=“B”
.Name=“kVar-”&hardwareId
如果结束
以
.Add（系列）
下一个
以
终端使用
端接头