带有自定义标签的 LiveCharts 笛卡尔映射和配置

Question

我使用 X 和 Y 值绘制了笛卡尔图表，以模仿阶梯图（x 值不一致）。是否可以为 Y 值更改的每个步骤添加自定义 x 标签？或类似条形图中的标签。

 var values = new ChartValues<Point>();

Loop:
    var point = new Point() { X = entry.DailyXFrom, Y = entry.YValue };

    values.Add(point);
    point = new Point() { X = entry.DailyXTo, Y = entry.YValue };
    values.Add(point);
    tempLabels.Add(entry.DailyVolume.ToString());


            seriesCollectionDaily = new SeriesCollection
                      {
                        new LineSeries
                        {
                          Configuration = new CartesianMapper<Point>()
                            .X(point => point.X) 
                            .Y(point => point.Y)
                            ,
                          Fill = Brushes.Transparent,
                          Title = "Series",
                          Values = values,
                          PointGeometry = null,
                          LineSmoothness = 0

                        }
                    };
 XAxis.Separator.IsEnabled = true;
 XAxis.Labels = tempLabels.ToArray();
chart.DataContext = this;


 <lvc:CartesianChart Name="chart"  Grid.Row="2" Grid.ColumnSpan="2" Series="{Binding seriesCollectionDaily }" >
                    <lvc:CartesianChart.AxisX >
                        <lvc:Axis Name="XAxis" Title=""   LabelsRotation="0" Foreground="Black" >
                            <lvc:Axis.Separator>
                                <lvc:Separator Name="LabelSeparator"></lvc:Separator>
                            </lvc:Axis.Separator>
                        </lvc:Axis>
                    </lvc:CartesianChart.AxisX>
 </lvc:CartesianChart>

我得到了什么：

这就是我想要实现的目标。可能吗？

Answer 1

您可以向图表轴添加部分。

要绘制垂直剖面，您必须定义 SectionsCollection 个 AxisSection 项并将其绑定到 x-axis 个 Axis.Sections。
通过设置 AxisSection.Value 您可以定义轴上的位置。使用 AxisSection.SectionWidth 定义部分的宽度。默认为1，设置AxisSection.StrokeThickness时绘制简笔画

以下示例使用 StepLineSeries 绘制步骤图。举个例子，它显示了两条垂直线放置在相应的x-value：一条简单的线（SectionWidth = 1）和一段SectionWidth > 1（例如，突出显示一个范围）：

数据模型

public class DataModel : INotifyPropertyChanged
{
  public DataModel()
  {
    this.SeriesCollection = new SeriesCollection
    {
      new StepLineSeries()
      {
        Configuration = new CartesianMapper<ObservablePoint>()
          .X(point => point.X)
          .Y(point => point.Y)
          .Stroke(point => point.Y > 0.3 ? Brushes.Red : Brushes.LightGreen),
        Values = new ChartValues<ObservablePoint>
        {
          new ObservablePoint(0, 5),
          new ObservablePoint(20, 0),
          new ObservablePoint(30, 5),
          new ObservablePoint(40, 0),
          new ObservablePoint(80, 5),
        }
      }
    };

    // Add two sections at x=20 and x=30
    this.SectionsCollection = new SectionsCollection()
    {
      new AxisSection()
      {
        Value = 20,
        Stroke = Brushes.Red,
        StrokeThickness = 1
      },
      new AxisSection()
      {
        Value = 30,
        SectionWidth = 50,
        Stroke = Brushes.Red,
        StrokeThickness = 1
      }
    };
  }

  public Func<double, string> LabelFormatter => value => $"{value}ms";
  public SeriesCollection SeriesCollection { get; set; }
  public SectionsCollection SectionsCollection { get; set; }

  public event PropertyChangedEventHandler PropertyChanged;
  protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null) => this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

图表视图

<Window>
  <Window.DataContext>
    <DataModel />
  </Window.DataContext>

  <CartesianChart Height="500"
                  Series="{Binding SeriesCollection}">
    <CartesianChart.AxisX>
      <Axis Sections="{Binding SectionsCollection}"
            LabelFormatter="{Binding LabelFormatter}">
        <Axis.Separator>
          <Separator Step="10" />
        </Axis.Separator>
      </Axis>
    </CartesianChart.AxisX>
    <CartesianChart.AxisY>
      <Axis>
        <Axis.Separator>
          <Separator Step="5" />
        </Axis.Separator>
      </Axis>
    </CartesianChart.AxisY>
  </CartesianChart>
</Window>

带有自定义标签的 LiveCharts 笛卡尔映射和配置

LiveCharts Cartesian Mapping and Configuration with custom Labels

c#

wpf

livecharts