複合グラフプラグインについて

kintone のレコード一覧画面でグラフの表示ができるプラグインです。設定画面から kintone 上のデータを利用してグラフの設定を行うことができます。

設定方法

プラグイン設定画面を開く
1. アプリの管理者権限を持つユーザーで設定を開きます。
2. 設定タブを開きます。
3. カスタマイズ／サービス連携メニューの「プラグイン」をクリックします。
アプリにプラグインを追加する
1. 左上の「プラグインの追加」ボタンをクリックします。
2. 現在 kintone 上に取り込まれているプラグイン一覧が表示されます。
  プラグイン一覧から、複合グラフプラグインを選択(チェック)します。
  
  注意
  
  プラグイン一覧に該当のプラグインがない場合、事前にプラグインを kintone システム管理に追加する必要があります。
  kintone ヘルプに沿って、ダウンロードセンターから取得したプラグイン（zip ファイル）を追加して下さい。
3. 右下の「追加」ボタンをクリックします。
4. 追加したプラグイン一覧に複合グラフプラグインが表示されていたら、完了です。
プラグインの設定を行う
1. 歯車アイコンから設定画面を開きます。
2. グラフを作成します。
  初心者の方は、かんたんグラフ作成ボタンでグラフを追加するから始めることをおすすめします。
  グラフの詳細な設定を行いたい方は、一覧画面にグラフを追加するまたは詳細画面にグラフを追加するから
  グラフを表示したい位置に合わせて手順に進んでください。
  - 一覧画面にグラフを追加する
    1. 「一覧画面設定」タブを開きます。
    2. グラフを追加する一覧を選択します。
    3. 「新しい設定」ボタンをクリックしてください。
    4. グラフ設定が一つ追加されます。
    5. 追加されたグラフ設定をクリックして、グラフの設定をしてください。
      グラフの設定方法の詳細は 6.グラフを設定するを参考にしてください。
  - 詳細画面にグラフを追加する
    1. 「詳細画面設定」タブを開きます。
    2. 「新しい設定」ボタンをクリックしてください。
    3. グラフ設定が一つ追加されます。
    4. 追加されたグラフ設定をクリックして、グラフの設定をしてください。
      グラフの設定方法の詳細は 6.グラフを設定するを参考にしてください。
  - かんたんグラフ作成ボタンでグラフを追加する
    1. 右端の「かんたんグラフ作成」ボタンをクリックします。
    2. 順番に沿って設定を行います。「次のステップに進む」ボタンで、設定を進めることができます。
    3. プレビュー画面でグラフ表示が問題なければ、「グラフを追加する」ボタンをクリックします。
    4. 黒いバーが表示されたら、グラフの追加が完了です。
    5. ダイアログ下の「閉じる」ボタンで終了します。
      終了後、設定を保存する必要がございます。 4.プラグインの設定を保存するから設定を保存してください。
    6. 追加したグラフは、「一覧画面設定」タブもしくは「詳細画面設定」タブより編集が可能です。
      ※ステップ1で選択したグラフ表示位置によって、編集するタブが異なります。
プラグインの設定を保存する(必須)
1. 画面下部にある「設定を保存」ボタンをクリックします。
2. 画面左下に画像のような緑のバーが出たら、保存完了です。
3. 緑のバーの一番右にある「アプリの設定に戻る」をクリックします。
4. 「アプリを更新」ボタンをクリックして、「アプリを更新」ボタンをクリックしたら完了です。
プラグインの設定を他のアプリで使用する
1. ダウンロードが実行されるとブラウザにダウンロードボックスが表示されます。(環境により表示場所は異なります。)
2. 設定移行先のアプリに移動します。プラグイン設定で「設定をアップロード」ボタンをクリックして、先程ダウンロードしたファイルを選択します。
  
  注意
  
  移行先アプリに同じ一覧がない場合、アップロードしたプラグイン設定を表示することができません。
  移行先のアプリは、再利用して作成する必要があります。
3. 下部に黒色のバーが出て、設定が追加されていれば完了です。
グラフを設定する
1. グラフを追加する一覧の選択
  グラフを表示する一覧を選択します。
  選択後、選択した一覧に既に作成済みのグラフ設定（③）があれば下に表示されます。
  新しくグラフ設定を作成する場合は「新しい設定」ボタンで作成します。
2. レコード一覧表示チェックボックス
  グラフの下にkintoneレコード一覧を表示するかどうかを選択します。
3. グラフの設定
  「新しい設定」ボタンをクリックして作成されるグラフ設定です。
  ダッシュボードのように、同じ一覧に複数のグラフを作成したい場合は下記設定を複数作成します。
  1. グラフタイトル
    グラフエリアのタイトルを設定します。
  2. レイアウト設定
    1. グラフエリアの幅と高さを設定します。
    2. グラフの垂直位置表示位置
      複数のグラフを表示した際のグラフの垂直方向の配置を調整できます。
    3. グラフの表示位置
      詳細画面表示時にどこにグラフを表示するかを設定します。
      スペースに表示する場合は、「スペース」を選択してスペースIDを入力してください。
    4. グラフのカラーセット設定
      グラフの色を設定します。グラフ色は設定右側に表示されるカラーセットで、一番左側の色から順に配色されます。
      一番右まで色が配色されると、一番左側の色に戻り繰り返して配色します。
    5. 凡例表示位置
      グラフの凡例を表示する位置を設定します。
    6. グラフの線幅
      各グラフの線の太さを設定します。
      折れ線グラフ以外は「その他グラフの線幅」を変更してください。
    7. 棒グラフの軸間隔
      軸の余白割合を設定します。
      グラフ間余白割合は、一つの軸に複数の凡例を集合表示する場合の余白間隔を調整可能です。
      各余白割合設定を0%にすると、棒グラフの余白がなくなり、ヒストグラム表示が可能です。
  3. 条件色設定
    グラフ色を条件を指定して変更します。
    1. 「色設定追加」ボタンをクリックします。
    2. 「グラフ色」ボタンをクリックするとポップアップが表示されます。
      ポップアップ画面で任意の色を選択します。
    3. 歯車（条件変更）ボタンをクリックします。
    4. 下記ダイアログ画面が開いたら、「条件追加」ボタンをクリックして条件を追加してください。
    5. 設定を選択して[軸・凡例・集計項目・集計値]から条件色を設定するフィールドの分類を選択してください。
    6. フィールドを選択して条件を入力/選択してください。
      下記画像の設定は、軸で設定した「見込み時期」フィールドが「2018-10」の時に色変更する設定です。
      
      注意
      
      グラフ詳細設定が行われていない場合、フィールドに選択肢が表示されません。事前にグラフ詳細設定の手順を実施してください。
    7. 条件を複数入力する場合は、すべての条件(AND 条件)を満たす場合か、いずれかの条件(OR 条件)を満たす場合かを選択してください。
    8. 「適用」ボタンをクリックして、条件を設定に適応してください。
  4. ソート設定
    グラフデータの並びを集計値順で並び替えたい場合のみ設定します。
    この設定では、指定した集計項目の集計値順に並び替えを行います。
    
    注意
    
    パレート図は自動で並び替えを行うため設定は不要です。
    1. 集計項目とソート順を選択します。
      集計項目は、グラフ詳細設定で設定した集計項目ラベルから選択できます。
    2. 凡例が複数ある場合は、並び替えの基準とする凡例を指定します。「凡例項目を追加」ボタンをクリックします。
      
      補足
      
      指定しない場合は、一番最初に表示される凡例の集計値順に並び替えます。
    3. 凡例のフィールドと凡例ラベルを指定します。
      下記画像の設定は「製品名」フィールドが「kintone」である凡例の集計値を基準に並び替える設定です。
  5. 軸設定
    グラフの横軸と縦軸を設定します。縦軸は第1軸（グラフ左）と第2軸（グラフ右）のそれぞれで設定可能です。
    第2軸を設定する場合は「第2軸を設定する」ボタンをクリックして追加して同様に設定してください。
    1. 日付の空きデータを補完する設定を行います。
      日付軸を設定する際に、データのない日付も表示したい場合に設定します。
      チェックをつけると、日付軸を補完します。
    2. X軸のラベル表示設定を行います。
      初期値では、X軸のラベルは表示されません。表示したい場合にはチェックをしてください。
      チェックをつけると、X軸のラベルが表示されます。
      また、任意で表示名を変更したい場合は、「軸の表示名」フィールドに入力してください。
    3. 数値軸の範囲を設定します。
      表示する値の範囲を固定したい場合に設定します。
      設定する場合は「入力した値で固定する」を選択し、最大値と最小値を入力してください。
    4. 目盛間隔を設定します。
      レーダーチャートなどで軸の間隔を手動で設定したい場合に設定します。
    5. 軸の表示名を設定します。
      数値軸の軸名を変更したい場合に設定します。
      表示名を設定しない場合は、集計項目設定の「y軸ラベル」を表示します。
      （集計項目名が複数ある場合は、「y軸ラベル」をカンマ区切りで表示します。）
    6. 軸の表示単位を設定します。
      数値軸の桁数が多く、目盛ラベルの表示を省略したい場合に設定します。
  6. その他設定
    1. 基準線を作成する
      ここではグラフに基準線を表示する設定を行います。
      1. 基準線の設定を追加します。
        「基準線を追加」ボタンをクリックします。
        一つのグラフに複数の基準線を追加することが可能です。
      2. 基準線のラベル名を表示します。
        ラベルをグラフに表示する場合、ここで設定したラベル名がグラフ上に表示されます。
      3. 基準値を設定します。
        基準値は、入力値もしくはグラフの集計値を基準に設定できます。
        入力値を基準にする場合は「入力値」を選択し、「基準値」を入力してください。
        集計値を基準にする場合は「集計値の平均値」「集計値の最小値」「集計値の最大値」から選択し、
        「基準線項目」を集計値項目を選択してください。
        ※あらかじめグラフ詳細設定で集計項目を設定しておく必要があります。
        
        補足
        
        基準線用の集計値を利用する場合（基準線の集計値をグラフとして表示したくない場合）は、
        詳細設定の非表示アイコンをクリックして、グラフを非表示にしてください。
      4. 基準値を設定する軸を選択します。
        第二軸に表示する場合は、チェックをしてください。
        ※第二軸に基準線のみを設定することはできません。集計項目を設定してください。
      5. 基準値のスタイルを設定します。
        歯車ボタンをクリックして、ダイアログを表示します。ダイアログでは、線のスタイルやラベルの表示を設定可能です。
        「適用」ボタンをクリックして設定を適用します。
  7. グラフ詳細設定
    クリックするとグラフの詳細設定が開きます。グラフの内容を設定してください。
    ＋をクリックすることで、一つのグラフエリアに表示するグラフを増やすことができます。
    例えば、棒グラフと線グラフの複合グラフを作成したい場合は、棒グラフの設定、線グラフの設定の2つの設定を作成してください。
    1. グラフの種類とグラフの種類(サブタイプ)
      グラフの種類（棒グラフ、折れ線グラフ、円グラフ…）を選択できます。
      サブタイプは棒グラフの時のみ設定が可能です。
      「積み上げ」設定は、凡例や集計項目をグラフ上に積み上げて表示することが可能です。
    2. グラフに表示するデータ（アプリ）の選択
      グラフの作成に使用するデータを持つアプリを選択します。
      フォームにアプリ名を入力することでアプリを簡単に絞り込むことができます。
    3. 絞り込み条件
      グラフに表示するデータ（アプリ）の選択です。
      グラフの作成に使用するデータを条件によって絞り込むことができます。
      
      補足
      
      レコード一覧に絞り込みを設定している場合、絞り込み条件を適用した上で絞り込まれます。
      ※グラフの作成に使用するデータとプラグインを設定しているアプリが同じ場合のみ
      - 開いたレコードの値で、他アプリのデータを絞り込んだグラフを表示したい場合
        他アプリのデータを使用するため、「開いているレコードのデータを表示する」のチェックを外してください。
        「開いているレコードデータで絞り込む」をチェックして、
        データを紐づける他アプリのフィールドと参照するレコード内のフィールドを選択してください。
    4. 軸
      グラフの横軸を指定します。必須選択項目です。
      ソート順と優先順位を指定することで自由に軸を並べ替えることが可能です。
      複数の軸を設定している場合は、優先順位の番号が小さい項目から優先的に並び替えられます。
      
      注意
      
      複合グラフを設定する場合（グラフ詳細設定を複数設定する場合）、同じデータを持つフィールドを軸に設定する必要があります。
      最初のグラフ詳細設定の軸に「日単位」の日付項目を指定した場合、以降のグラフ詳細設定も「日単位」の日付項目を設定する必要があります。
      軸の範囲は、最初のグラフ詳細設定のデータ範囲で作成されます。
      ※同じデータを持つ別のアプリ同士のデータを1つのグラフに設定することが可能です。
    5. 凡例
      グラフの凡例を指定します。凡例のみの設定はグラフが表示されませんので、軸を合わせてご指定ください。
      ※円グラフ、ドーナツグラフ、鶏頭図、パレート図は軸を設定してください。
      また、ソート順と優先順位を指定することで自由に凡例を並べ替えることが可能です。
      複数の凡例を設定している場合は、優先順位の番号が小さい項目から優先的に並び替えられます。
      - 任意の順で並び替える
        歯車ボタンをクリックして表示される、詳細設定ダイアログから設定可能です。
        軸もしくは凡例項目値の昇順/降順で並び替えができない場合に設定します。
        入力した値の昇順で並び替えを行います。複数指定する際は、改行して入力します。
        ※優先して並べたい項目のみを入力する形式でも問題ございません。
    6. 「第二軸に設定する」チェックボックス
      チェックすることで、値の指標を第二軸（グラフ右側のY軸）に集約することが可能です。
      チェックしない場合は、第一軸（グラフ左側のY軸）に集約されます。
      複合グラフで異なる値範囲を持つ指標を利用する場合に有効です。
    7. 集計方法
      グラフの集計方法を指定します。
      合計、平均、最大、最小のいずれかの集計方法を選択した場合、kintone 上の項目を集計項目に選択します。
      
      注意
      
      y軸ラベルはそれぞれ必ず重複のない値を設定してください。重複した値を設定すると集計が正常に行われません。
    8. 「集計項目を積み上げする」チェックボックス
      チェックすることで、複数の集計項目を棒グラフに積み上げて表示することが可能です。
      売上総利益 + 売上原価のように集計項目を積み上げて表現したい場合に設定します。
      グラフ種類（サブタイプ）に「積み上げ」もしくは「100%積み上げ」を選択している場合に表示されます。
    9. 拡張計算フィールドを設定する
      グラフの軸・凡例・集計方法には、kintoneで計算できない項目をグラフ上で集計する「拡張計算フィールド」を設定可能です。
      ここでは、拡張計算フィールドの設定を行います。
      
      注意
      
      集計前に1レコードずつ計算処理を行うため、処理負荷が高い設定です。
      データの件数が1万件を超えるような場合は、拡張計算フィールドを利用せず、事前計算・集計することを推奨します。
      1. フォームをクリックし、選択肢を表示します。（軸・凡例・集計項目のいずれも設定可能です）
        一番上に表示される「＋新しい拡張計算フィールド」をクリックします。
      2. ダイアログが表示されます。
      3. フィールドコードを設定します。
        ここではkintoneフィールドコードとy軸ラベルのいずれも重複しない値を設定してください。
      4. 計算種別を設定します。
        ※現在は、「日付差分」のみが設定可能です。
      5. 計算詳細を設定します。
        
        「日付差分」計算
        kintone日付フィールドと今日の日数経過を計算可能です。
        開始日をkintone日付フィールド、終了日を今日起点での日付を設定します。
        計算単位は日数、週数、月数、年数単位に加えて、特定の曜日を排除して計算する営業日数を選択可能です。
        表示形式は「前後ラベル表示」にすると〇日前/今日/〇日後といった表示が可能です。
      6. 設定が完了したら「追加」をクリックして拡張計算フィールドを追加します。
      7. 設定を編集したい場合は、フィールド選択横の編集ボタンから修正が可能です。
        
        注意
        
        拡張計算フィールドは、一度作成したら、同じアプリデータを利用する別グラフ設定でも利用が可能です。
        複数のグラフで利用する拡張計算フィールドを編集した場合、編集内容がすべてに反映されますのでご注意ください。
グラフを並び替える
1. 画面下部にある「設定を並び替える」ボタンをクリックします。
2. グラフ横に矢印が表示されます。
3. 並び替えたいグラフ横の矢印をクリックして、順番を変更してください。
4. 設定を保存して完了です。