如何使用 C# WPF 制作带有实时图表的图表

Question

我正在制作图表并使用 C# WPF 查找数据库。我成功地进行了数据库搜索和图表。

是否可以在实时图表上制作这种形状的图表？我可以读取该值并根据时间在中间打印出来吗？

请输入图片的描述。 我现在正在做这个。这不是我想要的形状，因为它像底部一样出来。 ChatGPT 是可能的，但我认为不可能，因为该行自动从左端或右端开始。可以吗？

即使我稍后读取数据，我也不知道如何将时间后的值放入。我需要 5 行。

    public List<SensingDataPoint> GetSensingData(int _iCount)
    {
      List<SensingDataPoint> dataPoints = new List<SensingDataPoint>();
      var query = $"SELECT {sSensorId}, {sSensorTime}, {sSensorValue} FROM {sSensorTable} ORDER BY {sSensorTime} DESC LIMIT {_iCount}";

      using (var connection = new MySqlConnection(sConnectionString))
      {
        connection.Open();
        using (var command = new MySqlCommand(query, connection))
        {
          using (var reader = command.ExecuteReader())
          {
            while (reader.Read())
            {
              dataPoints.Add(new SensingDataPoint
              {
                ID = reader.GetInt32(0),  // ID 컬럼은 인덱스 0
                Time = reader.GetDateTime(1),  // Time 컬럼은 인덱스 1
                Value = reader.GetDouble(2)  // Value 컬럼은 인덱스 2
              });
            }
          }
        }
      }
      return dataPoints;
    }

  public class SensingDataPoint
  {
    public int ID { get; set; }
    public DateTime Time { get; set; }
    public double Value { get; set; }
  }
    // 실시간 데이터 업데이트 메서드
    private void vUpdateChartData()
    {
      // X축 레이블 설정
      if (SelectedData == MainViewModel.DataSelection.Value)
      {
        // 각 ID의 센서 데이터를 최신 데이터로 가져오기
        var SensorDataPoints = dbHelper.GetSensingData(iReadCount);

        // UI 스레드에서 차트 업데이트
        Application.Current.Dispatcher.Invoke(() =>
        {
          ID1SensorValues.Clear();
          ID2SensorValues.Clear();
          ID3SensorValues.Clear();
          ID4SensorValues.Clear();
          ID5SensorValues.Clear();
          vUpdateSeries(SensorDataPoints);

        });

      }
    }
    private void vUpdateSeries(List<SensingDataPoint> dataPoints)
    {
      // 기존 값 초기화
      foreach (var point in dataPoints)
      {
        if (selectedData == DataSelection.Value)
        {
          TimeLabels.Add(point.Time.ToString("HH:mm:ss"));
          switch (point.ID)
          {
            case 1:
              ID1SensorValues.Add(point.Value);
              ID2SensorValues.Add(0);
              ID3SensorValues.Add(0);
              ID4SensorValues.Add(0);
              ID5SensorValues.Add(0);
              break;
            case 2:
              ID1SensorValues.Add(0);
              ID2SensorValues.Add(point.Value);
              ID3SensorValues.Add(0);
              ID4SensorValues.Add(0);
              ID5SensorValues.Add(0);
              break;
            case 3:
              ID1SensorValues.Add(0);
              ID2SensorValues.Add(0);
              ID3SensorValues.Add(point.Value);
              ID4SensorValues.Add(0);
              ID5SensorValues.Add(0);
              break;
            case 4:
              ID1SensorValues.Add(0);
              ID2SensorValues.Add(0);
              ID3SensorValues.Add(0);
              ID4SensorValues.Add(point.Value);
              ID5SensorValues.Add(0);
              break;
            case 5:
              ID1SensorValues.Add(0);
              ID2SensorValues.Add(0);
              ID3SensorValues.Add(0);
              ID4SensorValues.Add(0);
              ID5SensorValues.Add(point.Value);
              break;
            default:
              break;
          }
        }
      }
    }

Answer 1

因为该线自动从左端或右端开始

那是因为你填写了每个时间戳的数据，即：

          TimeLabels.Add(point.Time.ToString("HH:mm:ss"));
          switch (point.ID)
          {
            case 1:
              ID1SensorValues.Add(point.Value);
              ID2SensorValues.Add(0); // this adds value 0 at timestamp point.Time, even if there's no data for ID 2
              ID3SensorValues.Add(0); // this also adds value 0 to for ID 3
              ID4SensorValues.Add(0); // etc.
              ID5SensorValues.Add(0);
              break;

这就是为什么你的线条从最左到最右。

如果您只想保留绘图中具有实际值的部分，但删除其余部分（在下图中，我在两个图像中标记了黄色绘图的不同区域），则不能简单地插入

0

作为值，因为它将被解释为该系列的正常值。

相反，插入一个特殊值，库将其理解为“空”，该值根据您使用的版本而不同（术语也略有不同）：

• liveCharts v0：使用

  double.NaN

  插入“缺失点”
  
• liveCharts v2：使用

  null

  插入“间隙/空点”