.NET 8.0 + ASP.NET Core(MVC) + ApexCharts + Dapper + SQLite で実装する注釈付きグラフ表示処理

前回作成した .NET 8.0 + ASP.NET Core(MVC) + Highcharts + Dapper + SQLite で実装するグラフ表示処理を、有料の Highcharts ではなく、無料の ApexChartsを使用し、Dapperを通して取得した SQLiteデータベースのデータをグラフ表示するサンプルを作成しました。
ソースコードは GitHub で公開しています。

日本の歴代内閣と日経平均株価を列挙し、それぞれの関係を示すグラフになっています。
現代貨幣理論(MMT)とマクロ経済政策が理解されている現代だから言えるけど、日本のバブル崩壊で1990年代に発生したあらゆる負債を日銀が全て買い取っていれば、日本のバブル崩壊なんて存在せず、夕張市も破綻せず、未だに「Japan as No.1」だった。
財務省はいまだに日本経済を崩壊させ続けてるけど。
不動産バブル崩壊に伴う中国経済の低迷だって、1京円と言われる不動産業界と地方の負債を、中国政府が全て買い取れば中国経済は直ぐ復活する。

ApexCharts

グラフの形式は Annotating the charts / Point (XY) annotations にしました。
ApexChartsは無料で改変自由な MIT License です。

ソースコード変更内容を解説

/WebApplication1/WebApplication1/Views/Home/Index.cshtml

Highcharts向けに作成したいた前回のソースコードは全て削除。
Topページが表示される際に実行される HomeControllerの Index()メソッドから受け取った、日本の歴代内閣、日経平均株価のデータを、JavaScriptの ApexChartsへ渡す処理を新たに作成。


@model WebApplication1.Models.ViewModel.IndexViewModel

@{
    ViewData["Title"] = "日経平均株価と内閣発足";

    // 日経平均株価データの処理
    var stockPrices = Model.日経平均株価List.Select(p => new { x = p.日付_UnixTimestamp * 1000, y = p.終値 }).ToList();

    // アノテーション用の内閣発足データの処理
    var annotations = Model.内閣List.Select(n =>
    {
        // 発足日に最も近い株価を取得する
        var nearestStockPrice = Model.日経平均株価List
            .OrderBy(p => Math.Abs(p.日付_UnixTimestamp - n.発足日付_UnixTimestamp))
            .FirstOrDefault();

        return new
        {
            x = n.発足日付_UnixTimestamp * 1000,
            y = nearestStockPrice != null ? (double?)nearestStockPrice.終値 : null, // 近似の株価に設定
            label = new
            {
                text = n.内閣名
            }
        };
    }).ToList();
}

<div id="chart" class="chart-container"></div>

<style>
    .chart-container {
        border: 1px solid rgba(0, 0, 0, 0.2); /* 薄いグレーの枠線 */
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    }
</style>

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
    var stockPrices = @Html.Raw(Json.Serialize(stockPrices));
    var annotations = @Html.Raw(Json.Serialize(annotations));

    var options = {
        series: [{
            name: '日経平均株価',
            data: stockPrices
        }],
        chart: {
            height: 600,
            type: 'line',
            background: '#fff'
        },
        xaxis: {
            type: 'datetime',
            labels: {
                style: {
                    fontSize: '15px'
                }
            }
        },
        yaxis: {
            labels: {
                formatter: function (value) {
                    return value + "円";
                },
                style: {
                    fontSize: '15px'
                }
            }
        },
        annotations: {
            points: annotations.map(a => ({
                x: a.x,
                y: a.y, // 発足日に対応する近似の株価を指定
                marker: {
                    size: 8,
                    fillColor: 'rgba(255, 69, 96, 0.3)',
                    strokeColor: 'rgba(255, 69, 96, 0.3)',
                    strokeWidth: 2,
                },
                label: {
                    borderColor: '#FF4560',
                    offsetY: -10,
                    style: {
                        color: '#000',
                        background: '#fff',
                        fontSize: '14px'
                    },
                    text: a.label.text
                }
            }))
        },
        stroke: {
            curve: 'straight',
            width: 3,
            colors: ['#007bff']
        },
        tooltip: {
            x: {
                format: 'yyyy-MM-dd'
            }
        }
    };

    var chart = new ApexCharts(document.querySelector("#chart"), options);
    chart.render();
</script>

100

101

102

103

104

105

106

107

108

109

110

111

@model WebApplication1.Models.ViewModel.IndexViewModel

ViewData["Title"] = "日経平均株価と内閣発足";

// 日経平均株価データの処理

var stockPrices = Model.日経平均株価List.Select(p => new { x = p.日付_UnixTimestamp * 1000, y = p.終値 }).ToList();

// アノテーション用の内閣発足データの処理

var annotations = Model.内閣List.Select(n =>

{

// 発足日に最も近い株価を取得する

var nearestStockPrice = Model.日経平均株価List

.OrderBy(p => Math.Abs(p.日付_UnixTimestamp - n.発足日付_UnixTimestamp))

.FirstOrDefault();

return new

{

x = n.発足日付_UnixTimestamp * 1000,

y = nearestStockPrice != null ? (double?)nearestStockPrice.終値 : null, // 近似の株価に設定

label = new

{

text = n.内閣名

}

};

}).ToList();

}

<style>

.chart-container {

border: 1px solid rgba(0, 0, 0, 0.2); /* 薄いグレーの枠線 */

padding: 10px;

border-radius: 5px;

box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);

}

</style>

var stockPrices = @Html.Raw(Json.Serialize(stockPrices));

var annotations = @Html.Raw(Json.Serialize(annotations));

var options = {

series: [{

name: '日経平均株価',

data: stockPrices

}],

chart: {

height: 600,

type: 'line',

background: '#fff'

xaxis: {

type: 'datetime',

labels: {

style: {

fontSize: '15px'

}

yaxis: {

labels: {

formatter: function (value) {

return value + "円";

style: {

fontSize: '15px'

}

annotations: {

points: annotations.map(a => ({

x: a.x,

y: a.y, // 発足日に対応する近似の株価を指定

marker: {

size: 8,

fillColor: 'rgba(255, 69, 96, 0.3)',

strokeColor: 'rgba(255, 69, 96, 0.3)',

strokeWidth: 2,

label: {

borderColor: '#FF4560',

offsetY: -10,

style: {

color: '#000',

background: '#fff',

fontSize: '14px'

text: a.label.text

}

}))

stroke: {

curve: 'straight',

width: 3,

colors: ['#007bff']

tooltip: {

x: {

format: 'yyyy-MM-dd'

}

};

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

</script>

/WebApplication1/WebApplication1/Views/Shared/_Layout.cshtml

ApexChartsの JavaScriptライブラリを <Head>内で読み込むように実装。


    <script src="https://cdn.jsdelivr.net/npm/apexcharts" asp-fallback-src="/js/apexcharts.js" asp-fallback-test-class="apexcharts-test" asp-fallback-test-property="apexcharts" asp-append-version="true"></script>

/WebApplication1/WebApplication1/wwwroot/js/apexcharts.js

ApexchartsのローカルJavaScriptライブラリ。
CDNに接続できなかった場合に備えて、Apexchartsの JavaScriptライブラリをローカルにも保持。