テーブルの構造化参照式を使用したチャートの追加

SpreadJS は、テーブルの構造化参照式をサポートしています。SpreadJS のチャートがテーブル構造化参照を使用してテーブル全体またはテーブルの特定の列にバインドされている場合、テーブルを更新すると、実行時にチャートの系列またはデータ値が自動的に更新されます。

チャートを作成するために、3 つの異なる構造化テーブル参照方式を使用できます。以下のセクションで、各方式について 1 つずつ説明します。

チャートのデータソースがテーブル範囲全体から取得される場合。
テーブル範囲全体を使用してチャートを作成した場合、行と列を追加、削除、自動拡張動作などによってテーブルのサイズを変更したりすると、次のGIF画像に示すように、チャートの系列も同時に更新されます。

次のサンプルコードは、構造化参照を使用してテーブル全体をデータソースとしたチャートを作成する方法を示しています。
```
// テーブルをデータソースとするチャートを追加します。
var chart1 = sheet.charts.add('chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 50, 150, 400, 200, "Table1[[#Headers],[#Data]]");
```
チャートのデータソースがテーブルの特定の列から取得される場合。
テーブル操作によって、チャートにバインドされた特定の列のデータが変更されると、次のGIF画像に示すように、チャートは新しいデータに従って更新されますが、系列は維持されます。

次のサンプルコードでは、構造化参照を使用して、テーブルの特定の列を含むチャートを作成します。
```
// テーブルの特定の列をチャートのデータソースに設定します。
var chart2 = sheet.charts.add('chart2', GC.Spread.Sheets.Charts.ChartType.columnClustered, 500, 150, 400, 200, "Table1[[#Headers],[#Data],[Name]],Table1[[#Headers],[#Data],[Age]]");
```
チャートのデータソースがテーブル構造参照と通常の範囲の組み合わせである場合。
チャートのデータソースがテーブル構造参照と通常の範囲の組み合わせで定義されていると、チャートは次のGIF画像に示すように更新されます。

次のサンプルコードは、テーブル構造化参照と通常の範囲の組み合わせを使用して、チャートのデータソースを設定する方法を示しています。
```
// テーブルの構造化参照と通常の範囲参照の組み合わせをデータソースとしてチャートを設定します。
var chart3 = sheet.charts.add('chart3', GC.Spread.Sheets.Charts.ChartType.columnClustered, 50, 400, 400, 200, "Table1[[#Headers],[#Data],[Id]],Sheet1!D1:D4");
```