#第 9 章：タスクダッシュボードとチャート

いよいよ待ちに待ったビジュアライゼーションの章に入ります！この章では、膨大な情報の中から本当に必要な内容に素早くフォーカスする方法を探っていきます。管理者として、複雑なタスクの中で方向を見失わないようにしましょう！一緒にタスク統計と情報表示を楽に仕上げていきましょう。

#9.1 重要な情報にフォーカスする

チームのタスク状況をひと目で把握し、自分が担当するタスクや気になるタスクを見つけたいですよね。煩雑な情報に振り回されるのではなく、的確にフォーカスしましょう。

まずは、チームタスク統計のチャートの作成方法を見てみましょう。

#9.1.1 チャートデータブロックの作成

新しいページ（例：パーソナルパネル）を作成します：

1. チャートデータブロックを新規作成します。（この大きなブロックの中に、複数のデータチャートを作成できます。）
2. チャートブロック内で、対象となるタスクテーブルを選択します。チャート設定に入りましょう。

#9.1.2 ステータス別統計の設定

異なるステータスのタスク数を集計するにはどうすればよいでしょうか？まずデータの処理から始めます：

• メジャー：一意のフィールド（例：ID フィールド）を選択してカウントします。
• ディメンション：ステータスでグループ化します。

次に、チャートの設定を行います：

1. 棒グラフまたは横棒グラフを選択します。

2. X 軸にステータス、Y 軸に ID を選択します。カテゴリフィールド「ステータス」を忘れずに選択してください！（選択しないと、チャートの色が区別できず、見分けにくくなります。）

   

#9.1.3 多次元統計：各担当者のタスク数

各担当者のステータスごとのタスク数を集計したい場合は、2 つのディメンションで統計を取りましょう！「担当者/ニックネーム」のディメンションを追加できます。

1. 左上の「クエリ実行」をクリックします。

2. チャートが少し変に見えるかもしれませんが、心配いりません。「グループ」を選択すると、異なる担当者の比較が展開されます。

3. また、全体数量を積み上げて表示したい場合は、「スタック」を選択できます。これで、各担当者のタスク数の割合と全体のタスク状況が一目でわかります！

#9.2 データフィルターと動的表示

#9.2.1 データフィルターの設定

さらに「キャンセル済み」と「アーカイブ済み」のデータを除外することもできます。左側のフィルター条件からこの 2 つの選択肢を外すだけです。これらの条件設定にはもう慣れているはずです！

フィルターの設定が完了したら、「確定」をクリックして設定画面を閉じます。ページに最初のチャートが完成しました。

#9.2.2 チャートのコピー

「グループ」と「スタック」の両方のチャートを同時に表示したいけど、再設定したくない場合はどうすればよいでしょうか？

• 最初のチャートブロックの右上角で「コピー」をクリックします。
• スクロールして下に移動すると、2 番目のチャートが表示されています。右側にドラッグして、「スタック」設定を外し、「グループ」に変更します。

#9.2.3 動的フィルター

異なる条件でタスクデータを動的にフィルターすることはできるでしょうか？

もちろんです！チャートデータブロックの下方で「フィルター」を開きます。上部にフィルターボックスが表示されるので、表示したいフィールドを展開し、フィルター条件を設定します。（例：日付フィールドを「範囲指定」に変更します。）

#9.2.4 カスタムフィルターフィールドの作成

特別な場合に「キャンセル済み」や「アーカイブ済み」のデータも含めたい場合はどうすればよいでしょうか。さらに動的フィルターやフィルターのデフォルト条件設定もサポートしたい場合は？

カスタムフィルターフィールドを一緒に作成しましょう！

カスタムフィルターフィールド：関連データテーブルのフィールドやカスタムフィールド（チャートでのみ使用可能）を選択できます。

フィールドタイトル、説明、フィルター演算子の編集や、デフォルト値（現在のユーザーや日付など）の設定がサポートされており、実際のニーズに合わせたフィルターが可能です。

1. タイトルに「ステータス」と入力します。
2. ソースフィールドは空のままにします。
3. コンポーネントは「チェックボックス」を選択します。
4. オプションはデータベース作成時のステータス属性値に従って入力します（ここでの属性の順序は オプションラベル - オプション値 です）。

作成が完了したら、「デフォルト値の設定」をクリックし、必要なオプションを選択します。

デフォルト値の設定後、チャート設定に戻り、フィルター条件を「ステータス - いずれかを含む - 現在のフィルター/ステータス」に変更し、確認します！（両方のチャートを変更してください。）

完了です。フィルターをテストしてみましょう。データが完璧に表示されています。

#9.3 動的リンクとタスクフィルター

次に、非常に実用的な機能を実装します：統計数字をクリックすることで、対応するタスクのフィルターに直接ジャンプする機能です。まず、各ステータスの数量統計チャートを追加し、一番上に配置しましょう。

#9.3.1 「未着手」を例に、統計チャートを作成

1. メジャーを ID カウントに設定します。
2. フィルター条件を設定します：ステータスが「未着手」に等しい。
3. コンテナ名を「未着手」、タイプを「統計」に設定し、チャート名は空のままにします。

「未着手」の統計が正常に表示されました。ステータスごとに 5 つコピーし、一番上にドラッグしましょう。

#9.3.2 リンクフィルターの設定

1. タスク管理テーブルブロックのあるページに戻り、ブラウザ上部のリンク形式を確認します（通常 http://xxxxxxxxx/admin/0z9e0um1vcn のような形式です）。

   ここで xxxxxxxxx はウェブサイトのドメイン、/admin/0z9e0um1vcn はパスです。（最後の /admin を探せば大丈夫です。）

2. リンクの一部をコピーします。

   • リンクジャンプを行うために、まずリンクから特定の部分を抽出する必要があります。
   • admin/ から始まります（admin/ 自体は含めないでください）。リンクの末尾までコピーします。例えば、この例ではコピーする部分は 0z9e0um1vcn です。

マウスを「未着手」に移動すると、カーソルが指のマークに変わります。クリックすると、ジャンプに成功します。

3. チャートのリンクを設定します。 次に、リンクにフィルターパラメータを追加しましょう。タスクステータスのデータベース識別子を覚えていますか？リンクの末尾にこのパラメータを追加することで、タスクのフィルターが可能になります。
   • リンクの末尾に ?task_status=Not started を追加すると、リンクは 0z9e0um1vcn?task_status=Not started のようになります。

URL パラメータの形式を理解しましょう： リンクにパラメータを追加する際、いくつかの形式ルールがあります：

• クエスチョンマーク（?）：パラメータの開始を示します。
• パラメータ名とパラメータ値：パラメータ名=パラメータ値 の形式です。
• 複数のパラメータ：複数のパラメータを追加する場合は、& 記号でつなげます。例： http://xxxxxxxxx/admin/hliu6s5tp9x?status=todo&user=123 この例では、user が別のパラメータ名、123 がその値です。

4. ページに戻り、クリックしてジャンプします。成功です。URL の末尾に期待したパラメータが追加されています。

#9.3.3 URL フィルター条件との関連付け

テーブルがまだ連動して変わらないのはなぜでしょう？心配しないでください。最後のステップを一緒に完了させましょう！

• テーブルブロックの設定に戻り、「データ範囲の設定」をクリックします。
• 「ステータス」が「URL クエリパラメータ/status」に等しいを選択します。

「確認」をクリックすると、フィルターが成功します！

#9.4 データビジュアライゼーション：クールなチャート

データビジュアライゼーション：ECharts（商用プラグイン、有料） ECharts は、「折れ線グラフ（多次元）」、「レーダーチャート」、「ワードクラウド」など、より多くのカスタマイズ可能な設定項目を提供します。

より多くのチャート設定を利用したい場合は、「データビジュアライゼーション：ECharts」ブロックを有効にしましょう！

#9.4.1 クールなレーダーチャートを素早く設定する

データが重なって見にくい場合は、サイズや半径を調整して、すべての情報が明確に表示されるようにしましょう！

設定が完了したら、ドラッグして表示方法を調整して完了です！

#9.4.2 その他のチャートコンテナ

ここにはまだまだ探索できるチャートがあります。

#ワードクラウド

#ファネルチャート

#複数指標（デュアルアクシス、ECharts 折れ線グラフ）

デュアルアクシスチャートでは、より多くの指標を追加できます。

#対比横棒グラフ

#9.5 チャレンジ

この章を終える前に、小さなチャレンジを出題します：

1. 残りの進行中、レビュー待ち、完了、キャンセル済み、アーカイブ済みの URL パラメータもすべて追加し、正しくジャンプ・フィルターできるようにしましょう。
2. 「担当者」の複数選択フィールドを設定し、先ほど完成した「ステータス」の複数選択と同様に、デフォルト値を現在のユーザーのニックネームに設定しましょう。

次の章では、ダッシュボードの続きを展開していきます。次回もお楽しみに！

---

引き続き探索し、創造力を存分に発揮してください！問題が発生した場合は、いつでも NocoBase 公式ドキュメント を参照するか、NocoBase コミュニティ に参加してディスカッションできます。