検査実績チャートウィジェット仕様書

既存サイトに埋め込む用の検索実績チャートです。
一旦、２時間で編集する前提で売価（２万円）原価１万円を想定しています。

1. 概要

名称：検査実績チャートウィジェット
目的：クリニックの検査・処置実績を動的に表示するドーナツグラフウィジェット
特徴：
- 年度タブ切り替えで各検査の件数・割合をアニメーション表示
- 累計件数と年度ごとの合計件数を明示
- 医療広告ガイドライン（Q&A A3-17）対応の注意書きを自動更新
- 既存サイトに干渉せず埋め込み可能（#rc-widget スコープ）

デモ　https://hero1125.xsrv.jp/support/manual/donut/

2. 構成ファイル

index.html
- ウィジェット本体のマークアップ
- <link>/<script> による CSS/JS 読み込み
rc-style.css
- #rc-widget 以下のスタイリング
- 各要素（累計、タブ、カード、注意書き）のクラス別定義
rc-script.js
- Chart.js 初期化・プラグイン定義
- タブ生成 → ドーナツグラフ生成 → 年度切替ロジック
- 初期表示は 2024 年

ファイル　https://seisaku.hero-intra.com/wp-content/uploads/2025/07/rc.zip

3. ディレクトリ構成例

/widget/
├── index.html
├── rc-style.css
├── rc-script.js
└── (assets/)  # アイコン等あれば配置

/widget/

├── index.html

├── rc-style.css

├── rc-script.js

└── (assets/) # アイコン等あれば配置

4. 依存ライブラリ

Chart.js (v3 以上推奨)
- CDN: https://cdn.jsdelivr.net/npm/chart.js

5. HTMLマークアップ要素

<div id="rc-widget">
  <link rel="stylesheet" href="rc-style.css">
  <div class="rc-cumulative">累計件数表示</div>
  <div id="rc-tabs" class="rc-tabs"></div>
  <div class="rc-year-total" id="rc-year-total"></div>
  <div class="rc-charts"></div>
  <p id="rc-guideline" class="rc-guideline">注意書き</p>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="rc-script.js"></script>
</div>

<div class="rc-cumulative">累計件数表示</div>

</div>

6. カスタマイズ箇所

periodStart 定数（rc-script.js 内）
- 集計年度の開始月日を設定可能。
- 例：const periodStart = { month: 4, day: 1 }; → 「4月1日〜翌年3月末」を集計期間に。
dataByYear（rc-script.js 内）
- 各年度の実績配列を追加・変更
years 配列（rc-script.js）
- 表示したい年度リストを調整
colors 配列（rc-script.js）
- 各検査グラフの色設定を更新
ウィジェット幅/カード幅（rc-style.css の minmax(120px,1fr)）
- カラム数や最小幅を調整可能

7. 操作手順

上記ファイルを同じフォルダに配置
既存HTMLに <div id="rc-widget"> 部分を貼り付け
CSS/JS へのパスを環境に合わせて修正
ブラウザで動作確認

8. 注意事項

DOMロード前のスクリプト実行を避けるため、<script defer> は不要（内部で DOMContentLoaded を使用）
既存サイトに同名 ID/クラスがないことを確認
医療広告ガイドラインの改訂時には注意書き文言を更新

9. バージョン管理

v1.0.0: 初版リリース（2025-07-XX）

以上がウィジェット導入・保守に必要な仕様書です。ご不明点あればご相談ください！

検査実績チャートウィジェット 仕様書