シェイプ基盤のチャートの追加

SpreadJS は、シェイプ基盤で作成されたチャートをサポートします。シェイプを基盤とすることで、zIndex メソッドを使用して配置された要素の重なり順を設定したり、group メソッドを使用して指定した要素をグループ化したり、コネクタを使用して他の要素と連結したりすることができます。

次の図は、シェイプに基づいたチャートを表示します。

shapebasedchart

シェイプに基づいたチャートを作成するには、以下のように、チャートのモジュールより先に、シェイプのモジュールを参照する必要があります。

<script src="scripts/gc.spread.sheets.all.0.0.0.js"></script>
<script src="scripts/plugins/gc.spread.sheets.shapes.0.0.0.js"></script>
<script src="scripts/plugins/gc.spread.sheets.charts.0.0.0.js"></script>

モジュールローダーを使用する場合は、依存関係を手動で処理する必要はなく、チャートのパッケージがシェイプのパッケージを自動的にインポートします。

import "@grapecity/spread-sheets-charts"

次のサンプルコードは、チャートと他の図形要素を追加する方法を示します。

<script src="https://code.jquery.com/jquery-2.2.4.min.js" type="text/javascript"></script>
<link href="css/gc.spread.sheets.0.0.0.css" rel="stylesheet" />
<script src="scripts/gc.spread.sheets.all.0.0.0.min.js"></script>
<script src="scripts/gc.spread.sheets.shapes.0.0.0.min.js"></script>
<script src="scripts/gc.spread.sheets.charts.0.0.0.min.js"></script>
<script>
     $(document).ready(function () {
         var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
         var sheet = spread.getActiveSheet(); 
// チャートのデータを準備します。
sheet.setArray(0, 0, [
     ["", "Chrome", "FireFox", "IE", "Safari"],
     ["2020年", 0.5651, 0.1734, 0.1711, 0.427],
     ["2021年", 0.623, 0.1531, 0.1073, 0.464],
     ["2022年", 0.636, 0.1304, 0.083, 0.589]
]);
// チャートを追加します。
let chart = sheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 100, 100, 500, 280, "A1:E4");
// シェイプを追加します。
let shape = sheet.shapes.add('Shape1', GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 300, 50, 100, 100);
// zIndex メソッドを適用します。
sheet.shapes.zIndex('Chart1', 1);
// groupメソッドを適用します。
let groupShape = sheet.shapes.group([shape, chart]);
  });

メモ：Excelファイルのインポート・エクスポート処理に、Excel.IOモジュールを使用する場合は、シェイプ基盤のチャートのインポートとエクスポートはサポートされますが、重なり順(zIndex)、グループ化、コネクタの情報は失われます。Excelファイルのインポート・エクスポートには、Sheet.IOモジュールを使用することを推奨します。
シェイプ基盤ではなく、従来と同じDOM基盤のチャートを使用する場合は、以下のモジュールを使用します。
gc.spread.sheets.legacycharts.x.x.x.js（x.x.x には使用するバージョンを指定します。例 17.0.4）
@mescius/spread-sheets-legacy-charts （npmパッケージを使用する場合）