製品の検品結果を評価したり在庫管理をしたりする場面でチャートに H(IGH)、M(IDIUM)、L(OW) などの基準線を追加したい場合があると思います。
そのような場合は IgbValueOverlay コンポーネントの軸注釈機能と軸注釈のフォーマット機能を併せて利用することで可視化できます。
[Program.cs] IgbValueOverlayModule と IgbDataChartAnnotationModule をサービスに追加する
Program.cs で Services に IgbValueOverlayModule と IgbDataChartAnnotationModule を追加します。IgbValueOverlayModule は IgbValueOverlay コンポーネントを使用するのに必要なモジュール、IgbDataChartAnnotationModule は軸注釈 (今回の場合はチャート右側の “H”、”M”、”L” の文字) を表示するのに必要なモジュールです。
// Program.cs
builder.Services.AddIgniteUIBlazor(
typeof(IgbDataChartCoreModule),
typeof(IgbDataChartCategoryModule),
typeof(IgbDataChartCategoryCoreModule),
typeof(IgbDataChartInteractivityModule),
typeof(IgbColumnSeriesModule),
typeof(IgbValueOverlayModule),
typeof(IgbDataChartAnnotationModule)
);
[App.razor] 画面に IgbValueOverlay を追加する
28 行目以降で 1 本の基準線に対して 1 つの IgbValueOverlay を追加しています。IsAxisAnnotationEnabled を true に設定して軸注釈表示を有効にしています。そのままでは “H”、”M”、”L” ではなく Value の値 “120”、”60″、”20″ がそのまま表示されてしまうので、AxisAnnotationFormatLabelScript で “H”、”M”、”L” を返す JavaScript (※後述) を呼び出しています。
@* App.razor *@
<IgbDataChart ...>
<!-- データ表示用の軸 -->
<IgbCategoryXAxis Name="xAxis1" ... />
<IgbNumericYAxis Name="yAxis1" MinimumValue="0" MaximumValue="140" />
<!--
基準線表示用の軸
※データの目盛は左側、それとは別に「H」「M」「L」の軸注釈を右側に表示しているので、
※左側と同じ目盛間隔になるように軸注釈専用の Y 軸を右側に置いています。
※ただし目盛ごとの数値を表示する必要はないので文字色 (LabelTextColor) は透明色にしています）
-->
<IgbNumericYAxis Name="yAxis2"
MinimumValue="0"
MaximumValue="140"
LabelLocation="AxisLabelsLocation.OutsideRight"
LabelTextColor="transparent" />
...
<!-- データ表示用 -->
<IgbColumnSeries ... />
<IgbColumnSeries ... />
...
<!-- 基準線表示用 -->
<IgbValueOverlay Name="lowOverlay"
IsAxisAnnotationEnabled="true"
AxisName="yAxis2"
Value="20"
AxisAnnotationFormatLabelScript="OnFormatLabelLowScript" />
<IgbValueOverlay Name="midiumOverlay"
IsAxisAnnotationEnabled="true"
AxisName="yAxis2"
Value="60"
AxisAnnotationFormatLabelScript="OnFormatLabelMidiumScript" />
<IgbValueOverlay Name="highOverlay"
IsAxisAnnotationEnabled="true"
AxisName="yAxis2"
Value="120"
AxisAnnotationFormatLabelScript="OnFormatLabelHighScript" />
</IgbDataChart>
[igbDataChart.js] “H”、”M”、”L” を返す JavaScript を実装し、登録する
App.razor で指定している各 JavaScript (OnFormatLabelLowScript、OnFormatLabelMidiumScript、OnFormatLabelHighScript) を実装します。今回は “H”、”M”、”L” を表示するだけでよいので、そのままシンプルに “H”、”M”、”L” を return しているだけのスクリプトになっています。そして igRegisterScript で登録します。
// wwwroot/js/igbDataChart.js
(() => {
const OnFormatLabelLowScript = (args) => {
return "L";
}
igRegisterScript("OnFormatLabelLowScript", OnFormatLabelLowScript, false);
const OnFormatLabelMidiumScript = (args) => {
return "M";
}
igRegisterScript("OnFormatLabelMidiumScript", OnFormatLabelMidiumScript, false);
const OnFormatLabelHighScript = (args) => {
return "H";
}
igRegisterScript("OnFormatLabelHighScript", OnFormatLabelHighScript, false);
})();
また、ルート ページ (WebAssembly の場合は wwwroot/index.html) でこのスクリプトを読み込むコードを追加します。
<!-- wwwroot/index.html -->
...
<body class="ig-typography">
...
<script src="_content/IgniteUI.Blazor/app.bundle.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
<script src="js/igbDataChart.js"></script> <!-- 👈ここ -->
</body>
サンプル
以上全てまとめたサンプルはこちらです。
