データチャートの作成

次の手順に従って、データチャートを作成します。

データチャートを使用するために、以下のCSSおよびスクリプトファイルを追加します。

 <link href="css/gc.spread.sheets.x.x.x.css" rel="stylesheet" />
 <script src="scripts/gc.spread.sheets.all.x.x.x.min.js"></script>
 <script src="scripts/gc.spread.sheets.shapes.x.x.x.min.js"></script>
 <script src="scripts/gc.spread.sheets.datacharts.x.x.x.min.js"></script>

window.onloadイベントを非同期関数として実行します。その後、SpreadJS環境でspreadのインスタンスを作成し、シートを取得してデータチャートを追加します。
```
let spread = new GC.Spread.Sheets.Workbook("spreadjs-host");
const sheet = spread.getActiveSheet();
```
dataManagerメソッドを使用してデータマネージャーのインスタンスを初期化します。
```
const dataManager = spread.dataManager();
```
データマネージャーにテーブルを作成し、fetchメソッドを使用して指定されたソースからデータを取得します。
データが完全に取得されるまでコードの実行が一時停止されるようにするには、awaitを使用します。awaitは非同期関数でのみ有効であることに注意してください。
```
const salesTable = createSalesTable(dataManager);
await salesTable.fetch();
```

テーブルにデータを追加する関数を作成します。

function createSalesTable (dataManager) {
    const records = [
        ['2021', 'East', 'SunLin', 'Drinks', 'Apple Juice', 140, 9],
        ['2021', 'East', 'JinShiPeng', 'Drinks', 'Apple Juice', 290, 17],
        ['2021', 'East', 'ZhangShang', 'Drinks', 'Apple Juice', 300, 28],
        ['2021', 'East', 'SunYang', 'Drinks', 'Apple Juice', 120, 10],
        ['2021', 'East', 'YuanChengJie', 'Drinks', 'Apple Juice', 220, 15],
        ['2021', 'North', 'ZhangYing', 'Drinks', 'Apple Juice', 250.0, 23],
        ['2021', 'North', 'WangWei', 'Drinks', 'Apple Juice', 180.0, 17],
        ['2021', 'North', 'ZhangWu', 'Drinks', 'Apple Juice', 233.0, 23],
        ['2021', 'North', 'HanWen', 'Drinks', 'Apple Juice', 123.0, 12],
        ['2021', 'East', 'SunLin', 'Drinks', 'Milk', 431.0, 38],
        ['2021', 'East', 'JinShiPeng', 'Drinks', 'Milk', 635.0, 56],
        ['2021', 'East', 'ZhangShang', 'Drinks', 'Milk', 324.0, 33],
        ['2021', 'East', 'SunYang', 'Drinks', 'Milk', 644.0, 68],
        ['2021', 'East', 'YuanChengJie', 'Drinks', 'Milk', 343.0, 19],
        ['2021', 'North', 'ZhangYing', 'Drinks', 'Milk', 234.0, 13],
        ['2021', 'North', 'WangWei', 'Drinks', 'Milk', 666.0, 39],
        ['2021', 'North', 'ZhangWu', 'Drinks', 'Milk', 700.0, 77],
        ['2021', 'North', 'HanWen', 'Drinks', 'Milk', 111.0, 8],
        ['2021', 'East', 'SunLin', 'Drinks', 'Orange Juice', 176.0, 18],
        ['2021', 'East', 'JinShiPeng', 'Drinks', 'Orange Juice', 500.0, 20],
        ['2021', 'East', 'ZhangShang', 'Drinks', 'Orange Juice', 340.0, 19],
        ['2021', 'East', 'SunYang', 'Drinks', 'Orange Juice', 540.0, 45],
        ['2021', 'East', 'YuanChengJie', 'Drinks', 'Orange Juice', 563.0, 56],
        ['2021', 'North', 'ZhangYing', 'Drinks', 'Orange Juice', 300.0, 19],
        ['2021', 'North', 'WangWei', 'Drinks', 'Orange Juice', 490.0, 44],
        ['2021', 'North', 'ZhangWu', 'Drinks', 'Orange Juice', 233.0, 25],
        ['2021', 'North', 'HanWen', 'Drinks', 'Orange Juice', 760.0, 78],
        ['2021', 'East', 'SunLin', 'Dessert', 'Chocolate', 333.0, 32],
        ['2021', 'East', 'JinShiPeng', 'Dessert', 'Chocolate', 420.0, 46],
        ['2021', 'East', 'ZhangShang', 'Dessert', 'Chocolate', 318.0, 37],
        ['2021', 'East', 'SunYang', 'Dessert', 'Chocolate', 256.0, 21],
        ['2021', 'East', 'YuanChengJie', 'Dessert', 'Chocolate', 583.0, 54],
        ['2021', 'North', 'ZhangYing', 'Dessert', 'Chocolate', 352.0, 33],
        ['2021', 'North', 'WangWei', 'Dessert', 'Chocolate', 384.0, 39],
        ['2021', 'North', 'ZhangWu', 'Dessert', 'Chocolate', 435.0, 42],
        ['2021', 'North', 'HanWen', 'Dessert', 'Chocolate', 356.0, 36],
        ['2021', 'East', 'SunLin', 'Dessert', 'Beef Jerky', 789.0, 73],
        ['2021', 'East', 'JinShiPeng', 'Dessert', 'Beef Jerky', 156.0, 14],
        ['2021', 'East', 'ZhangShang', 'Dessert', 'Beef Jerky', 289.0, 23],
        ['2021', 'East', 'SunYang', 'Dessert', 'Beef Jerky', 562.0, 45],
        ['2021', 'East', 'YuanChengJie', 'Dessert', 'Beef Jerky', 546.0, 56],
        ['2021', 'North', 'ZhangYing', 'Dessert', 'Beef Jerky', 218.0, 17],
        ['2021', 'North', 'WangWei', 'Dessert', 'Beef Jerky', 541.0, 56],
        ['2021', 'North', 'ZhangWu', 'Dessert', 'Beef Jerky', 219.0, 21],
        ['2021', 'North', 'HanWen', 'Dessert', 'Beef Jerky', 345.0, 21],
    ];
    const columns = ['Year', 'Region', 'Salesman', 'ProductCategory', 'Product', 'Sales', 'Return'];
    return dataManager.addTable('Sales', {
        data: records.map((x) => {
            const record = {};
            columns.forEach((c, i) => record[c] = x[i]);
            return record;
        })
    });
}

指定された座標とsheet.dataCharts.add()メソッドを使用してデータチャートを作成します。
```
const dataChart = sheet.dataCharts.add('data-chart', 10, 10, 600, 400);
```

setChartConfig()メソッドを使用して、特定の設定でデータチャートを構成します。次の例では、値、カテゴリ、および色を含むタイプとエンコーディングが適用されています。

データチャートには、追加時にカスタマイズできる要素がいくつかあります。詳細については、データチャートの要素を参照してください。

dataChart.setChartConfig({
    tableName: 'Sales',
    config: {
        header: {
            title: "Bar Chart"
        }
    },
    plots: [
        {
            type: GC.Spread.Sheets.DataCharts.DataChartType.bar,
            encodings: {
                values: [
                    {
                        field: "Sales",
                        aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
                    }
                ],
                category: {
                    field: "Product"
                },
                color: {
                    field: "Product"
                }
            },

        }
    ]
});