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

.NET 8.0 の ASP.NET Core アプリ(MVC)に Highchartsを追加し、Dapperを通して取得した SQLiteデータベースのデータをグラフ表示するサンプルを作成しました。
ソースコードは GitHub で公開しています。

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

Highcharts

グラフの形式は Highcharts with annotations にしました。
Highchartsを商用利用する場合は有料です。

データベース

SQLiteの管理ツールは DB Browser for SQLite を使用。
使用したバージョンは 2024/10/29時点で最新の v3.13.1。
https://sqlitebrowser.org/blog/version-3-13-1-released/

DB Browser for SQLite で SQLiteのデータベースファイルを作成。
日本の歴代内閣、日経平均株価の過去データは、SQLiteデータベースファイルに登録済み。

ソースコード構成

今回使った Visual Studio プロジェクトテンプレートは、Visual Studio 2022 + .NET 8 + ASP.NET Core MVC、HTTPS無し。

NuGet パッケージインストール

System.Data.SQLiteパッケージをインストール

使用したバージョンは 2024/11/6時点で最新の v1.0.119。


> Install-Package System.Data.SQLite

> Install-Package System.Data.SQLite

Dapperパッケージをインストール

使用したバージョンは 2024/11/6時点で最新の v2.1.35。


> Install-Package Dapper

> Install-Package Dapper

Newtonsoft.Jsonパッケージをインストール

使用したバージョンは 2024/11/6時点で最新の v13.0.3。


> Install-Package Newtonsoft.Json

> Install-Package Newtonsoft.Json

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

/DB/EWise.db

SQLiteデータベースファイル。日本の歴代内閣、日経平均株価の過去データ登録済み。

/WebApplication1/WebApplication1.sln

この変更は無視して下さい。ソリューションを作り直した名残なので。

/WebApplication1/WebApplication1/appsettings.json

SQLiteデータベースのコネクションストリングを追加。


  "ConnectionStrings": {
    "DefaultConnection": "Data Source=..\\..\\DB\\EWise.db;;Version=3;Pooling=True;Max Pool Size=100;;BusyTimeout=5000;Synchronous=OFF;"
  },

"ConnectionStrings": {

"DefaultConnection": "Data Source=..\\..\\DB\\EWise.db;;Version=3;Pooling=True;Max Pool Size=100;;BusyTimeout=5000;Synchronous=OFF;"

/WebApplication1/WebApplication1/Consts/StaticData.cs

SQLiteデータベースのコネクションストリングを、アプリケーションの static領域に保持し、コネクションストリングの参照を楽にする。


namespace WebApplication1.Consts
{
    public static class StaticData
    {
        public static string ConnectionString = "";
    }
}

namespace WebApplication1.Consts

{

public static class StaticData

{

public static string ConnectionString = "";

}

/WebApplication1/WebApplication1/Controllers/HomeController.cs

Topページが表示される際に実行される HomeControllerの Index()メソッドで、日本の歴代内閣、日経平均株価のデータを取得し、ViewModeに纏めて Viewへ渡している。


using WebApplication1.Models.ViewModel;
using WebApplication1.Sqls;

using WebApplication1.Models.ViewModel;

using WebApplication1.Sqls;


        public IActionResult Index()
        {
            var 日経平均株価s = Sql日経平均株価.SelectAll();
            var 内閣s = Sql内閣.SelectAll();

            var viewModel = new IndexViewModel
            {
                日経平均株価List = 日経平均株価s,
                内閣List = 内閣s
            };

            return View(viewModel);
        }

public IActionResult Index()

{

var 日経平均株価s = Sql日経平均株価.SelectAll();

var 内閣s = Sql内閣.SelectAll();

var viewModel = new IndexViewModel

{

日経平均株価List = 日経平均株価s,

内閣List = 内閣s

};

return View(viewModel);

}

/WebApplication1/WebApplication1/Models/M内閣.cs

日本の歴代内閣用データモデルクラス。


namespace WebApplication1.Models
{
    public class M内閣
    {
        public long 発足日付_UnixTimestamp { get; set; }

        public string 内閣名 { get; set; }
    }
}

namespace WebApplication1.Models

{

public class M内閣

{

public long 発足日付_UnixTimestamp { get; set; }

public string 内閣名 { get; set; }

}

/WebApplication1/WebApplication1/Models/M日経平均株価.cs

日経平均株価用データモデルクラス。


namespace WebApplication1.Models
{
    public class M日経平均株価
    {
        public long 日付_UnixTimestamp { get; set; }
        public decimal 終値 { get; set; }
    }
}

namespace WebApplication1.Models

{

public class M日経平均株価

{

public long 日付_UnixTimestamp { get; set; }

public decimal 終値 { get; set; }

}

/WebApplication1/WebApplication1/Models/ViewModel/IndexViewModel.cs

Topページ用のビューモデルクラス。


namespace WebApplication1.Models.ViewModel
{
    public class IndexViewModel
    {
        public required List<M日経平均株価> 日経平均株価List { get; set; }
        public required List<M内閣> 内閣List { get; set; }
    }
}

namespace WebApplication1.Models.ViewModel

{

public class IndexViewModel

{

public required List<M日経平均株価> 日経平均株価List { get; set; }

public required List<M内閣> 内閣List { get; set; }

}

/WebApplication1/WebApplication1/Program.cs

SQLiteデータベースのコネクションストリングを、アプリケーションの static領域に保持する処理を追加。


using WebApplication1.Consts;

using WebApplication1.Consts;


StaticData.ConnectionString = builder.Configuration.GetConnectionString("DefaultConnection");

StaticData.ConnectionString = builder.Configuration.GetConnectionString("DefaultConnection");

/WebApplication1/WebApplication1/Properties/launchSettings.json

この変更は無視して下さい。ソリューションを作り直した名残なので。

/WebApplication1/WebApplication1/Sqls/Sql内閣.cs

SQLiteデータベースから日本の歴代内閣のデータを取得する処理を作成。


using Dapper;
using System.Data.SQLite;
using WebApplication1.Consts;
using WebApplication1.Models;

namespace WebApplication1.Sqls
{
    public static class Sql内閣
    {
        public static List<M内閣> SelectAll()
        {
            using (var sqliteConnection = new SQLiteConnection(StaticData.ConnectionString))
            {
                const string query = "SELECT * FROM 内閣";

                sqliteConnection.Open();
                return sqliteConnection.Query<M内閣>(query).AsList();
            }
        }

    }
}

using Dapper;

using System.Data.SQLite;

using WebApplication1.Consts;

using WebApplication1.Models;

namespace WebApplication1.Sqls

{

public static class Sql内閣

{

public static List<M内閣> SelectAll()

{

using (var sqliteConnection = new SQLiteConnection(StaticData.ConnectionString))

{

const string query = "SELECT * FROM 内閣";

sqliteConnection.Open();

return sqliteConnection.Query<M内閣>(query).AsList();

}

/WebApplication1/WebApplication1/Sqls/Sql日経平均株価.cs

SQLiteデータベースから日経平均株価のデータを取得する処理を作成。


using Dapper;
using System.Data.SQLite;
using WebApplication1.Consts;
using WebApplication1.Models;

namespace WebApplication1.Sqls
{
    public static class Sql日経平均株価
    {
        public static List<M日経平均株価> SelectAll()
        {
            using (var sqliteConnection = new SQLiteConnection(StaticData.ConnectionString))
            {
                const string query = "SELECT 日付_UnixTimestamp, 終値 FROM 日経平均株価";

                sqliteConnection.Open();
                return sqliteConnection.Query<M日経平均株価>(query).AsList();
            }
        }
    }
}

using Dapper;

using System.Data.SQLite;

using WebApplication1.Consts;

using WebApplication1.Models;

namespace WebApplication1.Sqls

{

public static class Sql日経平均株価

{

public static List<M日経平均株価> SelectAll()

{

using (var sqliteConnection = new SQLiteConnection(StaticData.ConnectionString))

{

const string query = "SELECT 日付_UnixTimestamp, 終値 FROM 日経平均株価";

sqliteConnection.Open();

return sqliteConnection.Query<M日経平均株価>(query).AsList();

}

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

Visual Studio プロジェクトを新規作成した際、デフォルトで実装されている「Welcome」欄は削除。
Topページが表示される際に実行される HomeControllerの Index()メソッドから受け取った、日本の歴代内閣、日経平均株価のデータを、JavaScriptの renderChart()メソッドへ渡す処理を追加。
renderChart()メソッドの実体は /wwwroot/js/site.js に実装しています。


@model WebApplication1.Models.ViewModel.IndexViewModel

@{
    ViewData["Title"] = "日経平均株価チャート";
}

<div id="container" style="width: 6000px; height: 500px;"></div>
<script>
    // site.js内のrenderChart関数を呼び出してチャートを描画
    // .NETのモデルデータをJavaScriptに渡す際に、UNIXタイムスタンプをミリ秒に変換
    renderChart('container',
    @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.日経平均株価List.Select(d => new
        {
            x = d.日付_UnixTimestamp * 1000, // 秒からミリ秒に変換
            y = (double)d.終値
        }).ToList())),
    @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.内閣List.Select(r => new
        {
            x = r.発足日付_UnixTimestamp * 1000, // 秒からミリ秒に変換
            text = r.内閣名
        }).ToList()))
        );
</script>

@model WebApplication1.Models.ViewModel.IndexViewModel

ViewData["Title"] = "日経平均株価チャート";

}

// site.js内のrenderChart関数を呼び出してチャートを描画

// .NETのモデルデータをJavaScriptに渡す際に、UNIXタイムスタンプをミリ秒に変換

renderChart('container',

@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.日経平均株価List.Select(d => new

{

x = d.日付_UnixTimestamp * 1000, // 秒からミリ秒に変換

y = (double)d.終値

}).ToList())),

@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.内閣List.Select(r => new

{

x = r.発足日付_UnixTimestamp * 1000, // 秒からミリ秒に変換

text = r.内閣名

}).ToList()))

);

</script>

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

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


    <script src="https://code.highcharts.com/highcharts.js" asp-fallback-src="/js/highcharts.js" asp-fallback-test-class="highcharts-test" asp-fallback-test-property="Highcharts" asp-append-version="true"></script>
    <script src="https://code.highcharts.com/modules/annotations.js" asp-fallback-src="/js/annotations.js" asp-fallback-test-class="highcharts-annotations-test" asp-fallback-test-property="Highcharts" asp-append-version="true"></script>
    <script src="/lib/jquery/dist/jquery.min.js" asp-append-version="true"></script>
    <script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js" asp-append-version="true"></script>
    <script src="/js/site.js" asp-append-version="true"></script>

/WebApplication1/WebApplication1/WebApplication1.csproj

インストールした System.Data.SQLite、Dapper、Newtonsoft.Json、NuGetパッケージが追加されている。


  <ItemGroup>
    <PackageReference Include="Dapper" Version="2.1.35" />
    <PackageReference Include="Newtonsoft.Json" Version="13.0.3" />
    <PackageReference Include="System.Data.SQLite" Version="1.0.119" />
  </ItemGroup>

</ItemGroup>

/WebApplication1/WebApplication1/wwwroot/js/annotations.js

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

/WebApplication1/WebApplication1/wwwroot/js/highcharts.js

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

/WebApplication1/WebApplication1/wwwroot/js/site.js

Highchartsの JavaScriptライブラリを使い、日本の歴代内閣と日経平均株価のグラフを表示する renderChart()メソッドを作成。


function renderChart(containerId, chartData, regimes) {
    Highcharts.chart(containerId, {
        chart: {
            type: 'line'
        },
        title: {
            text: '日経平均株価と内閣',
            align: 'left'
        },
        xAxis: {
            type: 'datetime',
            labels: {
                format: '{value:%Y}年' // x軸のラベルをyyyy/MM/dd形式に設定
            }
        },
        yAxis: {
            title: {
                text: ''
            },
            labels: {
                formatter: function () {
                    return this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + '円'; // 3桁ごとにカンマを入れる
                }
            }
        },
        tooltip: {
            xDateFormat: '%Y/%m', // ツールチップの日付フォーマットをyyyy/MM形式に設定
            valueSuffix: ' 円' // 金額の後ろに「円」を追加
        },
        series: [{
            name: '日経平均株価',
            data: chartData // 渡されたデータを使用
        }],
        annotations: regimes.map(r => ({
            labels: [{
                point: {
                    x: r.x,
                    y: chartData.find(d => d.x >= r.x)?.y || chartData[0].y, // 発足日付付近のy値を取得
                    xAxis: 0,
                    yAxis: 0
                },
                text: r.text
            }],
            labelOptions: {
                backgroundColor: 'rgba(255,255,255,0.5)',
                borderColor: 'black'
            }
        }))
    });
}

function renderChart(containerId, chartData, regimes) {

Highcharts.chart(containerId, {

chart: {

type: 'line'

title: {

text: '日経平均株価と内閣',

align: 'left'

xAxis: {

type: 'datetime',

labels: {

format: '{value:%Y}年' // x軸のラベルをyyyy/MM/dd形式に設定

}

yAxis: {

title: {

text: ''

labels: {

formatter: function () {

return this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + '円'; // 3桁ごとにカンマを入れる

}

tooltip: {

xDateFormat: '%Y/%m', // ツールチップの日付フォーマットをyyyy/MM形式に設定

valueSuffix: ' 円' // 金額の後ろに「円」を追加

series: [{

name: '日経平均株価',

data: chartData // 渡されたデータを使用

}],

annotations: regimes.map(r => ({

labels: [{

point: {

x: r.x,

y: chartData.find(d => d.x >= r.x)?.y || chartData[0].y, // 発足日付付近のy値を取得

xAxis: 0,

yAxis: 0

text: r.text

}],

labelOptions: {

backgroundColor: 'rgba(255,255,255,0.5)',

borderColor: 'black'

}

}))

});

}

Highcharts

データベース

ソースコード構成

NuGet パッケージ インストール

System.Data.SQLiteパッケージをインストール

Dapperパッケージをインストール

Newtonsoft.Jsonパッケージをインストール

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

/DB/EWise.db

/WebApplication1/WebApplication1.sln

/WebApplication1/WebApplication1/appsettings.json

/WebApplication1/WebApplication1/Consts/StaticData.cs

/WebApplication1/WebApplication1/Controllers/HomeController.cs

/WebApplication1/WebApplication1/Models/M内閣.cs

/WebApplication1/WebApplication1/Models/M日経平均株価.cs

/WebApplication1/WebApplication1/Models/ViewModel/IndexViewModel.cs

/WebApplication1/WebApplication1/Program.cs

/WebApplication1/WebApplication1/Properties/launchSettings.json

/WebApplication1/WebApplication1/Sqls/Sql内閣.cs

/WebApplication1/WebApplication1/Sqls/Sql日経平均株価.cs

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

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

/WebApplication1/WebApplication1/WebApplication1.csproj

/WebApplication1/WebApplication1/wwwroot/js/annotations.js

/WebApplication1/WebApplication1/wwwroot/js/highcharts.js

/WebApplication1/WebApplication1/wwwroot/js/site.js

コメント

NuGet パッケージインストール