kintone×Chart.jsで「棒グラフ＋折れ線グラフ」の複合グラフを表示できます！
はじめに：標準グラフでは見えない“数字の関係”
kintoneを日々使っていると、
「売上金額は棒グラフで、数量は折れ線で、同じ画面に重ねて見たい！」
そんな気持ちになったことはありませんか？
実は、kintoneの標準機能では「複合グラフ（棒＋折れ線）」の表示はできません。
単一のグラフ種類（棒、折れ線、円など）に限定されるため、
「金額」と「数量」のような異なる指標の関係性を直感的に把握するのは難しいのです。
そこで登場するのが、Chart.jsを活用した「カスタム複合グラフ」です。
この記事では、難しいコードの説明は最小限にして、
このカスタマイズでどんな効果やメリットが得られるかを中心にご紹介します。
kintoneで複合グラフ表示のサンプル画像
カスタマイズの目的：意思決定に直結する“データの見える化”
このカスタマイズの目的は、単に見栄えを良くすることではありません。
むしろ、経営判断や現場の行動につながる「気づき」を得ることにあります。
なぜ「複合グラフ」なのか？
棒グラフと折れ線グラフを重ねると、
「売上が増えても数量が減っている」「単価が上がった結果なのか」など、
一見すると見えにくい要因の関係性が明確になります。
| 比較項目 | 棒グラフ | 折れ線グラフ | 複合グラフで得られる気づき |
|---|---|---|---|
| 表現するデータ | 金額などの“規模” | 数量や変化の“傾向” | 「売上は上がったが数量は減った」などの要因関係 |
| 分析の目的 | どの項目が大きいか | どの方向に変化しているか | 数値間の“バランスと変化の両方”を把握 |
技術的な仕組み
🧩使うのは「カスタムビュー」と「Chart.js」
kintoneの「カスタムビュー」は、
JavaScriptやCSSを使って自由に一覧表の画面をデザインできる機能です。
通常の一覧ビューよりも、表やグラフを自由に表示できるのが特徴です。
そして「Chart.js」は、
GoogleやAppleなど世界中で使われているグラフ描画ライブラリ（外部の便利な部品）。
棒・折れ線・円・レーダーなど、多様なグラフを簡単に描けるのが魅力です。
🧠解説：「ライブラリ」とは？
よく使う機能をあらかじめまとめた“便利な道具箱”のようなもの。
難しい数式や描画処理を自分で書かずに済むため、開発がぐっと簡単になります。
得られる主なメリット
① 見たい「売上傾向」を一目で把握できる
金額と数量を同時に表示できることで、
たとえば「繁忙期は数量が多いけど単価が下がる」など、
販売構造の変化をすぐに見つけられます。
② 社長・部長・現場、すべての視点で活用できる
複合グラフは、立場によって得られる情報が異なります。
| 立場 | 着目点 | グラフから分かること |
|---|---|---|
| 社長 | 全体の売上・利益動向 | 単価戦略や販売トレンドを把握 |
| 部長 | 店舗別・担当者別比較 | 販売バランス・在庫効率の改善に活用 |
| 現場 | 商品別・日別の売れ筋確認 | 注文・発注タイミングの最適化に活かせる |
③ Excel集計を減らし、レポート作業が自動化
これまで「月次報告用のグラフをExcelで作成していた」場合、
kintone上で自動描画できれば、レポート作成の作業時間を大幅削減できます。
kintoneの集計機能は、クラウド上で常に最新データが反映されるため、
リアルタイムでチーム全体が同じ数字を共有できます。
また、「定期レポート」にすれば、毎週・毎月のレポートを自動作成・保存できます。
④ スマートフォンでも確認可能（レスポンシブ対応）
Chart.jsはレスポンシブデザイン対応。
画面サイズに合わせて自動的にレイアウトが調整されるため、
出先でもスマホでグラフを確認できます。
⑤ 将来的な拡張が容易
Chart.jsでは以下のような拡張も簡単です。
| 拡張内容 | できること |
|---|---|
| 期間選択ドロップダウン | 「今週」「今月」「今年分」など、任意の期間で集計範囲を切り替え可能 |
| プログレス表示 | 集計中の進捗をリアルタイム表示可能 |
| 大量データ対応 | offset方式で大量データを安全に集計 |
| レーダーチャート・円グラフ追加 | 指標を多角的に可視化 |
実務での活用事例５選
事例①：売上・数量の関係を見て「単価戦略」を見直す
ある雑貨メーカーでは、
商品ごとの「販売数量（折れ線）」と「売上金額（棒グラフ）」を重ねて表示。
結果、数量が伸びていないのに売上が上がった商品を発見し、
高単価戦略が功を奏していることを確認できました。
逆に数量は多いが売上が伸びない商品を見つけ、
販促を価格訴求型に切り替える判断にも役立ちました。
事例②：製造現場の「生産効率」分析に応用
製造業の現場では、「生産数量」と「不良率」などを組み合わせて表示。
折れ線で不良率を追いながら、棒グラフで生産量を見られるため、
品質と生産性のバランスを可視化できます。
kintone上でリアルタイムに更新されるため、
Excelでの集計や報告にかかっていた時間が月10時間以上削減されました。
事例③：小売店の「販売ピーク」を可視化
日別の売上推移を棒グラフで、
客数を折れ線で表示することで、
「売上が上がった日は客数が多かったのか、客単価が高かったのか」を判定。
イベントやセールの効果測定にも活用できます。
事例④：サービス業で「稼働率と売上」を同時管理
例えば清掃サービスやレンタル業などでは、
「稼働率（折れ線）」と「売上金額（棒グラフ）」を並べて管理。
稼働率が高いのに売上が低いときは単価設定の問題、
逆に稼働率が低くても売上が高ければ高付加価値サービスが伸びている証拠。
現場判断のスピードが格段に上がります。
事例⑤：在庫管理の「出庫数量と在庫金額」を可視化
在庫管理アプリでは、「在庫金額（棒）」と「出庫数量（折れ線）」を重ね、
在庫の“滞留状況”をグラフ化。
特定商品の回転が遅れていることが一目で分かり、
仕入れ調整の判断が即日行えるようになります。
導入効果まとめ
| 項目 | Before（導入前） | After（導入後） |
|---|---|---|
| グラフ作成作業 | 毎月Excelで手動作成 | 自動更新で作業ゼロ |
| 数値の理解度 | 数字だけで関係性が分かりにくい | 棒＋折れ線で変化の背景を把握 |
| 報告スピード | 報告まで3日かかる | 即日共有が可能 |
| 部署間共有 | メールや印刷で展開 | kintone画面でリアルタイム共有 |
| 経営判断 | 感覚的・事後的 | データドリブン（データに基づく）判断に転換 |
実装に必要なステップ（概要）
| ステップ | 内容 |
|---|---|
| ① | kintoneの「カスタムビュー」を作成 |
| ② | Chart.jsのCDNをJavaScript設定で追加 |
| ③ | グラフを表示するHTMLエリア（例：<canvas id="myChart">）を配置 |
| ④ | データを集計（例：日付・金額・数量）してChart.jsへ渡す |
| ⑤ | 複合グラフの設定（左軸＝金額、右軸＝数量）を定義 |
※コードは複雑ではなく、kintone上で完結します。
初めての方でも、サンプルを基にすぐ動かせます。
Chart.jsの魅力：シンプルさと拡張性のバランス
Chart.jsは、HTMLとJavaScriptだけで動作するため、
サーバー構築や外部データベース連携は不要です。
また、Cybozuが提供するCDNを使えば、特別なインストール作業も必要ありません。
さらに、色や軸、凡例などの細かい調整も可能で、
企業ロゴやブランドカラーに合わせたデザインも実現可能です。
kintone初心者でも安心な理由
- JavaScript知識が少なくても大丈夫
基本構成を理解すれば、コピペと設定変更でOK。 - kintone内で完結
他システムに影響を与えず、安全に試せる。 - 失敗しても簡単に戻せる
カスタマイズを無効化すれば、元の画面にすぐ戻せます。
まとめ：数字の“意味”を伝えるカスタマイズ
kintoneの複合グラフカスタマイズは、
単なる見た目の工夫ではなく、現場の理解と行動を変える力があります。
- 「なぜ売上が上がったのか？」
- 「どの商品が利益を支えているのか？」
- 「どの時期に在庫を調整すべきか？」
こうした疑問に一枚のグラフで答える仕組みを作ることが、
データ活用の第一歩です。
見やすい可視化ができれば、報告書が要らなくなるほど“現場の理解”が進みます。
kintoneをただのデータ置き場ではなく、“経営ダッシュボード”として活用しましょう。
🔨 自分でカスタマイズしてみたい方へ
以下のNote記事で本記事のカスタマイズ事例を紹介しています。
記事内で紹介しているカスタマイズコードは、無料で利用できるので是非挑戦してみて下さい。
「note:アプリ活用研究会（キン活）」は、当サイトのメンバーが執筆しています。
🌸 アプリテンプレートの販売
本記事でご紹介しているアプリテンプレートを、下記の料金プランで販売しています。
導入をご希望の方は、各プランの「お申込み／お問い合わせ」ボタンからお問い合わせください。
■ 料金プラン
◆単品販売（買取型）は、導入サポート付きの価格です。
単品動作タイプは60,000円、２アプリ連携タイプは100,000円、3つ以上連携タイプは150,000円です。
◆簡易サポート契約では、当サイトのアプリテンプレートとプラグインを合計6種類までご利用できます。
◆会員サポート契約では、ご利用範囲「無制限」で運用ヘルプデスク対応までフルサービスでご提供します。
| 項目 | 単品販売 | 簡易サポート | 会員サポート |
|---|---|---|---|
| 料金体系 | 60,000円 (税抜) | 120,000円 (税抜) | 360,000円 (税抜) |
| 契約期間 | なし | 毎年更新 | 6か月更新 |
| 導入サポート | ✔ | ✔ | ✔ |
| メールサポート | × | ✔ | ✔ |
| チャットサポート | × | ✔ | ✔ |
| バージョンアップ対応 | × | ✔ | ✔ |
| 運用ヘルプデスク対応 | × | × | ✔ |
| 商品のご利用範囲 | 本商品のみ | 6種類までご利用可能 ユーザー数10名まで |
無制限 ユーザー数30名まで |
| お問い合わせ／お申し込み | 購入する | お申込み |
🏫 kintone人材育成研修
この様なカスタマイズを自分で出来る様になりたい方は、当サイトの「Kintome人材育成」上級コースの受講をご検討して下さい。当サイトのTIPSで紹介しているカスタマイズ例のテンプレートを使えば、簡単に実装出来ます！
上級コースの受講者には、特典で当サイトのカスタマイズテンプレート（3種類まで）と３か月のサポート契約を無償でご提供しています。
研修目的を「カスタマイズテンプレートのアプリ導入」とする研修メニューもご提案可能です。
📣カスタマイズ・導入支援いたします！
本記事の様な「kintoneアプリのカスタマイズ」をご希望の企業様へ
kintoneを便利に活用できるカスタマイズと運用支援は、ぜひ当社にご相談ください！
#kintone #Javascript #カスタマイズ #複合グラフ
