作成日: 2022/05/01 最終更新日: 2022/05/01
文書種別
使用方法
詳細
時間経過とともに動的にデータが変化する場合に、データやX軸範囲を更新して折れ線グラフを描画するため、ObservableCollectionを利用する方法が考えられます。
以下に、独自に作成したデータ用クラスのObservableCollectionを使用し、X軸に時間を表示し、時間経過とともにデータ値とX軸の範囲を更新するサンプルを記載します。
※フォームにFlexChart、Button、Timerコントロールを配置して動作をご確認ください。
なお、以下のブログ記事もご参照いただけます(英語)。
How to Build a Time-Lapse Chart Using FlexChart

◎サンプルコード(VB)
以下に、独自に作成したデータ用クラスのObservableCollectionを使用し、X軸に時間を表示し、時間経過とともにデータ値とX軸の範囲を更新するサンプルを記載します。
※フォームにFlexChart、Button、Timerコントロールを配置して動作をご確認ください。
なお、以下のブログ記事もご参照いただけます(英語)。
How to Build a Time-Lapse Chart Using FlexChart

◎サンプルコード(VB)
Imports System.Collections.ObjectModel
Imports C1.Chart
Imports C1.Win.Chart
Public Class Form1
' 変数の宣言
Const NUMBER_OF_POINTS As Integer = 20
Private data As ObservableCollection(Of AxisBindingItem) = New ObservableCollection(Of AxisBindingItem)()
Private xValue As Double() = New Double(5999) {}
Private yValue1 As Double() = New Double(5999) {}
Private pos As Integer = 0
Private rnd As Random = New Random()
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
' グラフの設定
SetChart(FlexChart1)
End Sub
' グラフの設定
Private Sub SetChart(ByVal chart As FlexChart)
Dim series1 As Series = New Series()
FlexChart1.ChartType = ChartType.Line
FlexChart1.Series.Clear()
FlexChart1.Series.Add(series1)
FlexChart1.AxisY.Min = 0
FlexChart1.AxisY.Max = 100
FlexChart1.BindingX = "Text"
FlexChart1.Binding = "Ships"
FlexChart1.DataSource = data
FlexChart1.ChartType = ChartType.Line
End Sub
Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
' タイマの起動
Timer1.Interval = 1000
Timer1.Start()
End Sub
Private Sub Timer1_Tick(sender As Object, e As EventArgs) Handles Timer1.Tick
' 表示ポイントの制限
If data.Count > NUMBER_OF_POINTS Then
data.RemoveAt(0)
End If
' 新しい要素の追加
xValue(pos) = DateTime.Now.ToOADate()
Dim aniTemp As AxisBindingItem = New AxisBindingItem() With {
.Value = DateTime.Now.ToOADate(),
.Text = $"{DateTime.FromOADate(DateTime.Now.ToOADate()):mm:ss}",
.Ships = rnd.Next(0, 100)
}
data.Add(aniTemp)
' 対象要素の位置の更新
pos += 1
End Sub
End Class
' データ用クラス
Public Class AxisBindingItem
Public Property Value As Double 'X値
Public Property Text As String 'X値(時間表示用)
Public Property Ships As Double 'Y値
End Class
◎サンプルコード(C#)
using System.Collections.ObjectModel;
using C1.Chart;
using C1.Win.Chart;
namespace prj_C1FlexChart
{
public partial class Form1 : Form
{
// 変数の宣言
const int NUMBER_OF_POINTS = 20;
ObservableCollection data = new ObservableCollection();
double[] xValue = new double[6000];
double[] yValue1 = new double[6000];
int pos = 0;
Random rnd = new Random();
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
// グラフの設定
SetChart(flexChart1);
}
private void button1_Click(object sender, EventArgs e)
{
// タイマの起動
timer1.Interval = 1000; //1秒ごと
timer1.Start();
}
void timer_Tick(object sender, EventArgs e)
{
// 表示ポイントの制限
if (data.Count > NUMBER_OF_POINTS)
data.RemoveAt(0);
// 新しい要素の追加
xValue[pos] = DateTime.Now.ToOADate();
data.Add(new AxisBindingItem()
{
Value = xValue[pos],
Text = $"{DateTime.FromOADate(xValue[pos]):mm:ss}",
Ships = rnd.Next(0, 100)
});
// 対象要素の位置の更新
pos++;
}
// グラフの設定
private void SetChart(FlexChart chart)
{
// 系列の設定
Series series1 = new Series();
flexChart1.ChartType = ChartType.Line;
flexChart1.Series.Clear();
flexChart1.Series.Add(series1);
// Y軸の設定
flexChart1.AxisY.Min = 0;
flexChart1.AxisY.Max = 100;
// データバインドの設定
flexChart1.BindingX = "Text";
flexChart1.Binding = "Ships";
flexChart1.DataSource = data;
flexChart1.ChartType = ChartType.Line;
}
// データ用クラス
public class AxisBindingItem
{
public double Value { get; set; } //X値
public string Text { get; set; } //X値(時間表示用)
public double Ships { get; set; } //Y値
}
}
}