JavaScript/SpreadJS

シート上にデータが無くてもチャートが作成できる！SpreadJSの「データチャート」の使い方

by MESCIUS-dev

2025年3月26日にリリースされた「SpreadJS（スプレッドJS）」の最新バージョン「V18J」では、従来のExcel互換のチャートと異なり、シート上にデータを配置することなく、データ管理機能「データマネージャー」を経由してデータベースから取得したデータを用いてチャートを生成できる「データチャート」が追加されました。

SpreadJSのデータチャート
シート上に無いデータからチャートの作成ができる「データチャート」

本記事では、この「データチャート」の基本的な使い方やカスタマイズの方法について解説します。

データチャートとは

従来からあるExcel互換チャートでは、シート上のセルに設定された値をデータソースとしてシート上またはシェイプ上にチャートを描画しますが、今回追加されたデータチャートは、データ管理機能であるデータマネージャーに設定されたデータをデータソースとしてシェイプ上にチャートを描画します。

データチャートと従来のチャートの違い

Excel互換チャートを使用する場合、チャートのデータソースとなるデータは、データベースなどから取得して単純にシート上に展開するだけでなく、月別やカテゴリ別など、軸や凡例の項目にあわせてあらかじめ整理してシート上に展開する必要があります。

Excel互換チャートのデメリット

データチャートはデータマネージャーが管理するデータをデータソースとして使用できるので、上記のような手間がなく、データからチャートの生成をスムーズに行うことができます。

また、データマネージャーを使うことにより次のようなメリットを享受することもできます。

さらに、データチャートでは、実行時にチャートデザインを変更できる「データチャート構成パネル（DataChartConfigPanel）」が利用できます。

データチャート構成パネル（DataChartConfigPanel）

データチャートとExcel互換チャートを比較した表を以下に示します。

データチャートExcel互換チャート
名前空間GC.Spread.Sheets.DataChartsGC.Spread.Sheets.Charts
データの取得先データマネージャーシート上のセル範囲
チャートの種類24種類（DataChartType）39種類（ChartType）
複合チャート未対応対応
近似曲線未対応対応
Excelエクスポート画像チャートオブジェクト または 画像
実行時のデザイン機能DataChartConfigPanelなし
レポートシートでの利用対応未対応
ヘルプDataChartのヘルプを見るChartのヘルプを見る
デモDataChartのデモを見るChartのデモを見る

データチャートの使い方

ここからはデータチャートの使い方について詳しく解説していきます。

開発環境

今回は開発環境として以下を使用します。

事前準備

以下の4つのファイルを用意してWebページにSpreadJS（データチャート）を組み込みます。

index.htmlページ本体。このページの要素としてSpreadJSコントロールを配置します
app.jsSpreadJSやデータチャートの初期化など各種設定を行うためのコードを記載します
data.jsデータチャートに表示するデータを記載します
styles.cssSpreadJSコントロールのスタイル設定を行うためのコードを記載します

データチャートの使用にはSpreadJSのモジュールを環境に配置する必要があります。npmなどから入手する方法もありますが、今回は環境に直接SpreadJSのモジュールを配置していきます。あらかじめSpreadJSの製品版かトライアル版をご用意ください。トライアル版は以下より無償で入手可能です。

製品版、またはトライアル版をダウンロードしたら、ZIPファイルを解凍し、以下のファイルを環境にコピーします。CSSファイルは7種類あるのでお好みのテーマのものを選択してください。

  • scripts/gc.spread.sheets.all.18.0.6.min.js
  • scripts/plugins/gc.spread.sheets.shapes.18.0.6.min.js
  • scripts/plugins/gc.spread.sheets.datacharts.18.0.6.min.js
  • scripts/resources/gc.spread.sheets.resources.ja.18.0.6.min.js
  • css/gc.spread.sheets.excel2013white.18.0.6.css

データチャートの作成

データチャートを作成する手順は次のとおりです。

  1. SpreadJSの生成（Workbookのコンストラクタ）
  2. データマネージャーの生成（DataManagerのコンストラクタ）
  3. テーブル※の作成（DataManager.addTableメソッド）
    ※ データマネージャーはデータベース等から取得したデータを「テーブル」として保持します
  4. データチャートの作成（Worksheet.dataCharts.addメソッド）

テーブルを作成するときに、データマネージャーの機能を使ってデータをテーブルに設定します。そしてデータチャート作成後にデータチャートのsetChartConfigメソッドでテーブル名を指定し、データチャートにデータを渡します。

それでは、実際にデータチャートを作成してみましょう。

最初に、SpreadJSライブラリの参照設定をHTMLファイルに追加します。SpreadJSのモジュールに加えて、前述の「app.js」、「data.js」、「styles.css」への参照も追加します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link href="css/gc.spread.sheets.excel2013white.18.0.6.css" rel="stylesheet"/>
    <script src="scripts/gc.spread.sheets.all.18.0.6.min.js"></script>
    <script src="scripts/plugins/gc.spread.sheets.shapes.18.0.6.min.js"></script>
    <script src="scripts/plugins/gc.spread.sheets.datacharts.18.0.6.min.js"></script>
    <script src="scripts/resources/gc.spread.sheets.resources.ja.18.0.6.min.js"></script>

    <link href="css/styles.css" rel="stylesheet"/>
    <script src="scripts/data.js"></script>
    <script src="scripts/app.js"></script>
</head>
<body>
    <div id="ss"></div>
</body>
</html>

続いて「app.js」と「data.js」および「styles.css」を次のように作成します。
※ ライセンスキーを設定しない場合、トライアル版を示すメッセージが表示されます。ライセンスキーの設定方法についてはこちらをご覧ください。

// ライセンスキーとカルチャの設定
// GC.Spread.Sheets.LicenseKey = 'ここにSpreadJSのライセンスキーを設定します';
GC.Spread.Common.CultureManager.culture('ja-jp');

let spread = null;

window.onload = async () => {
  // SpreadJSの生成
  spread = new GC.Spread.Sheets.Workbook("ss");

  // データマネージャーの生成
  const dataManager = spread.dataManager();

  // テーブルの作成
  const tempTable = createTempTable(dataManager);
  await tempTable.fetch();

  // シートの設定
  const sheet = spread.getActiveSheet();
  sheet.options.gridline.showHorizontalGridline = false;
  sheet.options.gridline.showVerticalGridline = false;
  sheet.options.selectionBorderColor = "transparent";

  // データチャートの作成
  initDataChart(sheet);
}

// テーブルの作成
function createTempTable (dataManager) {
  const records = getData();
  const columns = ['年','月', '気温'];
  return dataManager.addTable('TempTable', {
      data: records.map((x) => {
          const record = {};
          columns.forEach((c, i) => record[c] = x[i]);
          return record;
      })
  });
}

// データチャートの作成
function initDataChart(sheet) {
    const dataChart = sheet.dataCharts.add(
    'data-chart-1',
    20, 20, 800, 400,
    GC.Spread.Sheets.DataCharts.DataChartType.column
  );
  dataChart.setChartConfig({
    tableName: 'TempTable',
    plots: [{
      // チャートの種類
      type: GC.Spread.Sheets.DataCharts.DataChartType.column,
      // 対応するフィールド
      encodings: {
        values: [{ field: '気温' }],
        category: { field: '月' },
        details: [{ field: '年' }],
        color: { field: '年' },
        tooltip: [{ field: '気温' }]
      },
     ・・・（中略）・・・
    }],
・・・（中略）・・・
  });
}

上記の「・・・（中略）・・・」部分は、次項の「データチャートのカスタマイズ」で実装します。この時点では何も記載しません。

function getData() {
  return [
    ['1964年', '1月', 1.8],
    ['1964年', '2月', 0.3],
    ['1964年', '3月', 4.0],
    ['1964年', '4月', 10.8],
    ['1964年', '5月', 15.2],
    ['1964年', '6月', 18.5],
    ['1964年', '7月', 22.5],
    ['1964年', '8月', 24.9],
    ['1964年', '9月', 18.9],
    ['1964年', '10月', 13.3],
    ['1964年', '11月', 8.5],
    ['1964年', '12月', 3.8],
    ['1994年', '1月', 1.8],
    ['1994年', '2月', 2.8],
    ['1994年', '3月', 4.0],
    ['1994年', '4月', 11.0],
    ['1994年', '5月', 15.5],
    ['1994年', '6月', 18.6],
    ['1994年', '7月', 24.2],
    ['1994年', '8月', 26.6],
    ['1994年', '9月', 22.2],
    ['1994年', '10月', 16.6],
    ['1994年', '11月', 9.6],
    ['1994年', '12月', 4.4],
    ['2024年', '1月', 4.2],
    ['2024年', '2月', 4.7],
    ['2024年', '3月', 6.0],
    ['2024年', '4月', 14.8],
    ['2024年', '5月', 17.8],
    ['2024年', '6月', 21.5],
    ['2024年', '7月', 26.1],
    ['2024年', '8月', 27.4],
    ['2024年', '9月', 23.5],
    ['2024年', '10月', 18.0],
    ['2024年', '11月', 10.9],
    ['2024年', '12月', 4.3]
  ];
}
/* SpreadJSのスタイル */
#ss {
   width: 900px;
   height: 490px;
   border: 1px solid silver;
}

以上を実装後アプリケーションを実行すると、シート上にないデータからチャートを生成して表示することができました。

データチャートの表示

データチャートのカスタマイズ

次にデータチャートの外観をカスタマイズする方法をご紹介します。ここでは、前項で「・・・（中略）・・・」と記載していた箇所にコードを追加して下記の要素をカスタマイズします。

  • ヘッダ
  • X軸
  • Y軸
  • 凡例
  • ツールチップ
  • プロット領域の余白

それでは、「app.js」内のfunction initDataChart(sheet)を次のように変更して動作を確認しましょう。

// データチャートの作成
function initDataChart(sheet) {
  const dataChart = sheet.dataCharts.add('data-chart-1', 20, 20, 800, 400, GC.Spread.Sheets.DataCharts.DataChartType.column);
  dataChart.setChartConfig({
    tableName: 'TempTable',
    plots: [{
      // チャートの種類
      type: GC.Spread.Sheets.DataCharts.DataChartType.column,
      // 対応するフィールド
      encodings: {
        values: [{ field: '気温' }],
        category: { field: '月' },
        details: [{ field: '年' }],
        color: { field: '年' },
        tooltip: [{ field: '気温' }]
      },
      // ツールチップ
      config: {
        tooltip: [{
          style: {
            fill: { color: "white" },
            stroke: { color: "silver" },
            strokeWidth: 1
          },
          textStyle: { color: "blue", fontSize: 15 }
        }]
      }
    }],
    config: {
      // ヘッダ
      header: {
        title: '仙台の気温変化',
        textStyle: {
          color: 'blue',
          fontSize: 20,
          fontFamily: 'メイリオ',
          fontWeight: 'Bold',
        },
        padding: {
          top: 10,
        }
      },
      // プロット領域
      plotAreas: [{
        axes: [
          {
            // X軸
            type: GC.Spread.Sheets.DataCharts.AxisType.x,
            labelStyle: {
              fontSize: 15,
              fontFamily: 'メイリオ',
            }
          },
          {
            // Y軸
            type: GC.Spread.Sheets.DataCharts.AxisType.y,
            title: "気温［℃］",
            titleStyle: {
              color: 'black',
              fontSize: 15,
              fontFamily: 'メイリオ',
            },
            labelStyle: {
              fontSize: 15,
              fontFamily: 'メイリオ'
            }
          }
        ],
        // 凡例
        legends: [{
          type: GC.Spread.Sheets.DataCharts.LegendType.color,
          position: GC.Spread.Sheets.DataCharts.LegendPosition.top,
          textStyle: {
            color: 'black',
            fontSize: 15,
            fontFamily: 'メイリオ'
          }
        }],
        // プロット領域の余白
        padding: {
          left: 20,
          right: 20,
          top: 20,
          bottom: 20,
        }
      }],
    },
  });
}

ヘッダや凡例、軸や余白など、データチャートの各要素がカスタマイズされて以下のようになります。

データチャートの外観カスタマイズ

棒グラフの「2024年8月」の棒にマウスポインタを配置するとツールチップが表示され、こちらも設定したスタイルの通りカスタマイズされていることが確認できます。

データチャートの外観カスタマイズ（2）

データチャート構成パネルで外観をカスタマイズ

データチャートでは冒頭でご紹介した「データチャート構成パネル」を使用してGUIからチャートの外観をカスタマイズすることもできます。データチャート構成パネルをアプリケーションに組み込むには、各ファイルを以下のように追記します。

・・・（中略）・・・
<body>
    <div class="container">
        <div id="ss"></div>
        <div id="chart-panel"></div>
    </div>
</body>
・・・（中略）・・・

DataChartConfigPanelクラスのコンストラクタの引数にパネルをホストするdiv要素のidと、関連付けるSpreadJSのコントロールを設定します。

・・・（中略）・・・
  // データチャートの作成
  initDataChart(sheet);

  // データチャート構成パネルの作成
  new GC.Spread.Sheets.DataCharts.DataChartConfigPanel('chart-panel', spread);
  // データチャートを選択状態にする
  spread.getActiveSheet().dataCharts.all()[0].isSelected(true);
}
・・・（中略）・・・
#chart-panel{
   width: 340px;
   height: 460px;
   border: 1px solid silver;
}

.container{
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: flex-start;
}

実行すると、データチャートの右側にデータチャート構成パネルが表示されます。

データチャートとデータチャート構成パネル

パネルを操作してチャートの任意の要素の外観をカスタマイズできます。

データチャートのプロパティ設定を取得

DataChartクラスのgetChartConfigメソッドを使用すると、現在のデータチャートの各種プロパティ設定を取得できるので、データチャート構成パネルで試したカスタマイズをコードから設定したい場合などに活用できます。アプリケーションに上記メソッドを実行するボタンを追加してみます。

・・・（中略）・・・ 
<body>
    <div class="container">
        <div id="ss"></div>
        <div class="panel-container">
            <button id="check-btn" class="check-btn">プロパティ設定の確認</button>
            <div id="chart-panel"></div>
        </div>
    </div>
</body>
・・・（中略）・・・
・・・（中略）・・・
  // データチャート構成パネルの作成
  new GC.Spread.Sheets.DataCharts.DataChartConfigPanel('chart-panel', spread);
  spread.getActiveSheet().dataCharts.all()[0].isSelected(true);
  document.getElementById("check-btn").onclick = checkConfig;
}
・・・（中略）・・・
// データチャート構成パネルの設定内容の確認
function checkConfig(){
  const sheet = spread.getActiveSheet();
  const config = sheet.dataCharts.get("data-chart-1").getChartConfig()
  console.log(config);
}
・・・（中略）・・・
.panel-container{
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: flex-start;
}

.check-btn{
   width: 340px;
   height: 25px;
   font-size: 12px;
   margin-bottom: 5px;
}

実行して［プロパティ設定の確認］ボタンを押下すると、コンソールから現在のデータチャートのプロパティ設定が確認できます。

作成したサンプルをStackBlitzで公開しているので、こちらもご覧ください。

また、ヘルプやオンラインデモでデータチャートの要素をカスタマイズする方法について解説しています。オンラインデモには「データチャート構成パネル」も搭載されているので、各要素を実際に変更して確認することができます。

さいごに

今回の記事では、「SpreadJS」でデータチャートを使って棒グラフを作成して各軸や凡例などの要素をカスタマイズする方法について解説しました。

製品サイトでは、SpreadJSの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

＼  この記事をシェアする  ／