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

编程问答 2022-06-06

问题描述

我已经使用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>

我得到了什么：

enter image description here

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

enter image description here

解决方法

您可以将部分添加到图表轴。

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

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

enter image description here

数据模型 

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,new ObservablePoint(40,new ObservablePoint(80,}
      }
    };

    // 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,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>