时间戳

首页 > 解决方案 > LiveCharts ColumnSeries 未显示

c# - LiveCharts ColumnSeries 未显示

问题描述

我在 WPF 中使用 LiveCharts 来可视化一些分析的结果。分析结果被添加到 SeriesCollection 并显示在 CartesianChart 中。您可以选择要使用的系列类型：LineSeries 或 ColumnSeries。然后创建所选类型并将其添加到 SeriesCollection。

有一个自定义映射器用于从 ChartValues 中选择 X 和 Y 值，并为 X 轴选择一个 AxisFormatter。

这些图表是 Blacklight.Controls.Wpf.DragDockPanelHost 的一部分。每个图表都是一个附加样式的 DragDockPanel。图表本身是一个带有 TemplateSelector 的 ContentControl，它以 DataTemplate 的形式返回 CartesianChart-XAML。

我已经尝试设置系列的填充或描边，或者手动将一些 ColumnSeries 放在那里，但这根本没有帮助。

SeriesCollection 的填充：

private SeriesCollection _Series;
public SeriesCollection Series
{
    get { return _Series; }
    set { SetProperty<SeriesCollection>(ref _Series, value); }
}

...

private void createDiagram()
{
    if (this._Analysis!= null && this._Diagram != null)
    {
        this.Series.Clear();
        foreach (KeyValuePair<state, Dictionary<DateTime, int>> kvp in this.Analysis.Execute())
        {
            Series series = Activator.CreateInstance(Diagram) as Series;
            if (series != null)
            {
                series.Title = kvp.Key.name;
                series.Values = new ChartValues<KeyValuePair<DateTime, int>>(kvp.Value);
                this.Serien.Add(series);
            }
        }
    }
}

映射器和 AxisFormatter：

CartesianMapper<KeyValuePair<DateTime, int>> mapper = Mappers.Xy<KeyValuePair<DateTime, int>>().X(kvp => ((DateTimeOffset)kvp.Key).ToUnixTimeSeconds()).Y(kvp => kvp.Value);
this.Series = new SeriesCollection(mapper);
this.XFormatter = value =>
{
    return DateTimeOffset.FromUnixTimeSeconds((long)value).DateTime.ToString("dd.MM.yyyy HH:mm");
};

模板选择器：

public class DashboardElementTemplateSelector : DataTemplateSelector
  {
    public DataTemplate ListDashboardElementTemplate { get; set; }
    public DataTemplate SingleValueDashboardElementTemplate { get; set; }

    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
      if (item is ListDashboardElementViewModel)
        return this.ListDashboardElementTemplate;
      else
        return this.SingleValueDashboardElementTemplate;
    }
  }

DragDockPanelHost 的 XAML：

  <UserControl.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary>
          <DataTemplate x:Key="listElement">
            <views:ListDashboardElementView/>
          </DataTemplate>
          <DataTemplate x:Key="singleValueElement">
            <views:SingleValueDashboardElementView/>
          </DataTemplate>
          <tempselect:DashboardElementTemplateSelector x:Key="elementTempSelector"
                                                       ListDashboardElementTemplate="{StaticResource listElement}"
                                                       SingleValueDashboardElementTemplate="{StaticResource singleValueElement}"
                                                       />
        </ResourceDictionary>
        <ResourceDictionary>
          <conv:BooleanToVisibilityConverter x:Key="visCon"/>
        </ResourceDictionary>
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </UserControl.Resources>

<bl:DragDockPanelHost ItemsSource="{Binding Diagrams}" Grid.Row="1" Margin="20" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
      <bl:DragDockPanelHost.Style>
        <Style TargetType="bl:DragDockPanelHost">
          <Setter Property="ItemsPanel">
            <Setter.Value>
              <ItemsPanelTemplate>
                <Canvas ClipToBounds="True" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                </Canvas>
              </ItemsPanelTemplate>
            </Setter.Value>
          </Setter>
          <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate TargetType="bl:DragDockPanelHost">
                <ItemsPresenter/>
              </ControlTemplate>
            </Setter.Value>
          </Setter>
        </Style>
      </bl:DragDockPanelHost.Style>
      <bl:DragDockPanelHost.DefaultPanelStyle>
        <Style TargetType="{x:Type bl:DragDockPanel}">
          <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate>
                <Grid Margin="10">
                  <Grid Margin="5">
                    <Grid.RowDefinitions>
                      <RowDefinition Height="30"/>
                      <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Border Background="#00000000" Margin="-2" Padding="5" Grid.Row="0">
                      <Grid>
                        <Grid.ColumnDefinitions>
                          <ColumnDefinition Width="4*"/>
                          <ColumnDefinition Width="2*"/>
                        </Grid.ColumnDefinitions>
                        <WrapPanel>
                          <Image Width="20" x:Name="GripBarElement" Source="/Aisys.XStorage.Dashboard;component/Images/move.png" Grid.Column="0" Cursor="Hand" HorizontalAlignment="Left"/>
                          <TextBlock Text="{Binding Name}" Grid.Column="0" FontSize="16" FontWeight="Bold" Margin="10,0,0,0"/>
                        </WrapPanel>
                        <WrapPanel HorizontalAlignment="Right" Grid.Column="2">
                          <Button Command="{Binding ExecuteCommand}" CommandParameter="{Binding}" Margin="5,0,5,0">
                            <Button.Template>
                              <ControlTemplate>
                                <Image Source="/Aisys.XStorage.Dashboard;component/Images/Refresh.png"/>
                              </ControlTemplate>
                            </Button.Template>
                          </Button>
                          <Button Width="20" Command="{Binding DataContext.RemoveDiagramCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type bl:DragDockPanelHost}}}" CommandParameter="{Binding}">
                            <Button.Template>
                              <ControlTemplate>
                                <Image Source="/Aisys.XStorage.Dashboard;component/Images/Remove.png"/>
                              </ControlTemplate>
                            </Button.Template>
                          </Button>
                          <Button Command="{Binding DataContext.ShowPropertiesCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type bl:DragDockPanelHost}}}" CommandParameter="{Binding}" Margin="5,0,5,0">
                            <Button.Template>
                              <ControlTemplate>
                                <Image Source="/Aisys.XStorage.Dashboard;component/Images/Preferences.png"/>
                              </ControlTemplate>
                            </Button.Template>
                          </Button>
                          <ToggleButton x:Name="MaximizeToggleButton" VerticalAlignment="Top" HorizontalAlignment="Right" IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay, Path=IsMaximized}" Margin="0,5,5,0" Width="25" Height="25" Cursor="Hand">
                            <ToggleButton.Template>
                              <ControlTemplate TargetType="ToggleButton">
                                <Image Source="/Aisys.XStorage.Dashboard;component/Images/Maximize.png" Margin="0,0,0,5"/>
                              </ControlTemplate>
                            </ToggleButton.Template>
                          </ToggleButton>
                        </WrapPanel>
                      </Grid>
                    </Border>
                    <Separator VerticalAlignment="Bottom" Margin="0,0,0,0"/>
                    <ContentControl Content="{Binding}" ContentTemplateSelector="{StaticResource elementTempSelector}" Grid.Row="1" Margin="10"/>
                  </Grid>
                </Grid>
              </ControlTemplate>
            </Setter.Value>
          </Setter>
        </Style>
      </bl:DragDockPanelHost.DefaultPanelStyle>
    </bl:DragDockPanelHost>

图表的 XAML：

  <Grid>
    <lvc:CartesianChart Series="{Binding Series}" LegendLocation="Right" Name="chart">
      <lvc:CartesianChart.AxisX>
        <lvc:Axis Title="Zeit" LabelFormatter="{Binding XFormatter}">
        </lvc:Axis>
      </lvc:CartesianChart.AxisX>
    </lvc:CartesianChart>
  </Grid>

如果我选择 LineSeries，一切正常。但是当我使用 ColumnSeries 时，什么都没有显示。您可以看到，轴被重绘并且分隔符移动。图例也被绘制，但没有可见的列。

任何想法为什么会发生这种情况？

标签： c#wpflivecharts

解决方案

我最近遇到了同样的问题。不幸的是，这似乎没有记录在任何地方，但由于某种原因，如果您有太多数据点与图表的大小相比，那么所有列都不会显示。您可以尝试减少数据点的数量直到它起作用（在我的情况下，不会显示 90 个数据点，但会显示 30 个），或者在 ColumnSeries 上有一个属性 ColumnPadding您可以将其调低为零，看看是否有帮助.

推荐阅读