std.csvをデータモデルとして受け取って、タイムチャートを描くTimeChartRendererクラスを、dfl.chartモジュールに追加しました。 2023年末にdfl.printingモジュールを作り始めたときからここを目指していましたが、やっとできましたね。

縦軸は信号名、横軸は時間です。系列ごとのデジタル信号とアナログ信号の別に応じて、表現方法を切り替えます。

CSVの要件

string csv =
    "Time (ms),D1,D2,D3,D4,A1,A2,A3,A4\n" ~
    "0,0,0,0,0,0,0,0,0\n" ~
    "100,1,0,0,0,5,2,10,2\n" ~
    "200,0,1,0,0,6,3,10,-3\n" ~
    "300,1,1,1,0,7,4,9,4\n" ~
    "400,0,0,1,1,8,5,9,-5\n" ~
    "500,1,0,1,1,9,2,8,6\n" ~
    "600,0,0,0,1,8,3,8,-7\n" ~
    "700,1,1,0,1,7,4,7,8\n" ~
    "800,0,1,0,0,6,5,7,-9\n" ~
    "900,1,0,1,0,5,2,6,10\n" ~
    "1000,0,0,1,0,4,3,6,-10\n" ~
    "1100,1,1,1,0,3,4,5,9\n" ~
    "1200,0,1,0,1,2,5,5,-9\n" ~
    "1300,1,0,0,1,1,2,4,8\n" ~
    "1400,0,0,0,1,0,3,4,-8\n";

上のコードに示したものが、図中のタイムチャートの元になっているCSVです。

TimeChartRendererが取り込むCSVは、ヘッダー行が必須です。1行目がヘッダー行として読み込まれます。

ヘッダー行の1列目は、横軸のタイトルとして使われます。

各レコード行の1列目は、横軸（時間軸）の時間として使われます。 2列目以降は、プロットする値として使われます。

コンストラクタ呼び出し

auto _graph = new TimeChartRenderer!(int,int,int,int,int,int,int,int,int)(csv, 15);

TimeChartRenderer(T...)に与えるテンプレートパラメータは、ヘッダー行（1行目）を除いたレコード部分（2行目以降）のカラムの型を列挙します。時間軸である1列目の型も含めます。

コンストラクタの引数には、第1引数には文字列を、第2引数にはレコード数を与えます。ほかのコンストラクタを使うことで描画するレコード範囲を指定できますが、あまり使うことはないでしょう。

設定できる要素

たくさんありますが上の図で使っているものを列挙します。

図の位置
図のマージン
系列ごとのデジタル/アナログの別、色、1つの系列を描く高さ、目盛りの最小値、目盛りの最大値
プロットエリアのパディング（上、下、左、右）
プロットエリアの枠の色
プロットエリアと横軸エリアの隙間
横軸の有無
横軸の目盛りのピクセル数
横軸の目盛りのステップ数（いくつのレコードごとに目盛りを打つか）
横軸の目盛りの長さ（内、外）
横軸の目盛りエリアの高さ
縦軸の有無
縦軸の目盛りエリアの幅
各系列のゼロ点を示す線の有無
背景色

サンプルコード

最後の_table関係のコメントアウトを解除すれば、ウィンドウの右の方に表も描画されます。ウィンドウを最大化しないと表は見えませんのであしからず。

import dfl;

version(Have_dfl) // For DUB.
{
}
else
{
    pragma(lib, "dfl.lib");
}

class MainForm : Form
{
    alias CustomTimeChartRenderer = TimeChartRenderer!(int,int,int,int,int,int,int,int,int);
    CustomTimeChartRenderer _graph;

    alias CustomTableRenderer = TableRenderer!(int,int,int,int,int,int,int,int,int);
    CustomTableRenderer _table;

    public this()
    {
        this.text = "TimeChartRenderer example";
        this.size = Size(600, 650);

        string csv =
            "Time (ms),D1,D2,D3,D4,A1,A2,A3,A4\n" ~
            "0,0,0,0,0,0,0,0,0\n" ~
            "100,1,0,0,0,5,2,10,2\n" ~
            "200,0,1,0,0,6,3,10,-3\n" ~
            "300,1,1,1,0,7,4,9,4\n" ~
            "400,0,0,1,1,8,5,9,-5\n" ~
            "500,1,0,1,1,9,2,8,6\n" ~
            "600,0,0,0,1,8,3,8,-7\n" ~
            "700,1,1,0,1,7,4,7,8\n" ~
            "800,0,1,0,0,6,5,7,-9\n" ~
            "900,1,0,1,0,5,2,6,10\n" ~
            "1000,0,0,1,0,4,3,6,-10\n" ~
            "1100,1,1,1,0,3,4,5,9\n" ~
            "1200,0,1,0,1,2,5,5,-9\n" ~
            "1300,1,0,0,1,1,2,4,8\n" ~
            "1400,0,0,0,1,0,3,4,-8\n";
        _graph = new CustomTimeChartRenderer(csv, 15);
        _graph.location = Point(50, 50);
        _graph.chartMargins = ChartMargins(50, 50, 50, 50);
        _graph.seriesStyleList[0..4] = TimeChartSeriesStyle(true, Color.blue, 20); // Digital
        _graph.seriesStyleList[4..7] = TimeChartSeriesStyle(false, Color.red, 50, 0, 10); // Analog
        _graph.seriesStyleList[7] = TimeChartSeriesStyle(false, Color.red, 100, -10, 20,); // Analog
        _graph.plotAreaTopPadding = 20;
        _graph.plotAreaBottomPadding = 20;
        _graph.plotAreaLeftPadding = 20;
        _graph.plotAreaRightPadding = 20;
        _graph.plotAreaBoundsColor = Color.black;
        _graph.plotAreaAndHorizontalScaleSpanY = 10;
        _graph.hasHorizontalScale = true;
        _graph.horizontalScaleSpan = 20;
        _graph.horizontalScaleStep = 2;
        _graph.horizontalScaleLineInnerSide = 5;
        _graph.horizontalScaleLineOuterSide = 5;
        _graph.horizontalScaleHeight = 20;
        _graph.hasVerticalScale = true;
        _graph.verticalScaleWidth = 40;
        _graph.hasZeroLine = true;
        _graph.backColor = Color.white;

        _table = new CustomTableRenderer(csv, 15);
        _table.location = Point(600, 50);
        _table.hasHeader = true;
        _table.showHeader = true;
        _table.headerLine = true;
        _table.width[] = 50;
    }

    protected override void onPaint(PaintEventArgs e)
    {
        if (_graph)
            _graph.draw(e.graphics);
        // if (_table)
        //     _table.draw(e.graphics);
    }
}

static this()
{
    Application.enableVisualStyles();
}

void main()
{
    Application.run(new MainForm());
}