chart.jsを用いたレーダーチャートを「テーマエディタ上でノーコードでブロック追加できる」ようにするためのカスタマイズ方法です。chart.jsは様々なプロパティを設定でき、見た目を自由にカスタマイズできるので便利ですね。
◆実装のメリット
・テーマエディタ上で視覚的に設定可能
・商品ごとに表示項目のカスタマイズが容易
・コードを触らずに設定内容の変更が可能
◆具体的な手順
①メタフィールドの設定
・管理画面から必要な数のレーダーチャート項目の定義を追加
・各商品に対してレーダーチャート項目値を設定
②テーマのカスタマイズ
・商品テンプレートに「カスタムLiquidセクション」を追加してバロメーター表示用のコードを挿入
◆実装のポイント
・表示する項目によって最大値・最小値の表示内容を調整する必要あり
テーマ「Rise/Dawn」で商品のメタフィールドを使ってchart.jsによる「商品レーダーチャート」を表示する設定例
【設定方法①】必要な分だけ商品メタフィールドにレーダーチャート項目の定義を追加し、対象の商品の値を設定する
【（テーマRise/Dawnの場合）設定方法】商品テンプレートの商品情報にカスタマイズされたLiquidブロックを追加しコードを挿入
