Chart要素

Reactでチャート要素を使用すると、すべてのチャート要素をネイティブのデータ連結のサポートと同期させながら、アプリケーションのデータを視覚化できます。

Reactアプリを作成する

コマンドプロンプトウィンドウを開き、次のコマンドを入力します。

npm install -g create-react-app
create-react-app quick-start
cd quick-start
npm start

コマンドを実行すると、ディレクトリ内の指定の場所にReactプロジェクトが作成されます。Reactプロジェクトの詳しい作成方法については、https://reactjs.org/docs/add-react-to-a-new-app.htmlを参照してください。

Spread.Sheetsモジュールをインストールする

Spread.Sheets Reactモジュール、および日本語リソースを、npmからインストールします。

npm install @grapecity/spread-sheets-react
npm install @grapecity/spread-sheets-resources-ja

スタイルをインポートする
index.jsファイルで、スタイルファイルをインポートします。

import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
プロジェクトでチャートのReactモジュールをインストールする
次のコマンドを使用して、プロジェクトにチャートのモジュールをインストールする必要があります。

npm install @grapecity/spread-sheets-charts

Reactアプリケーションでチャートを使用する

必要に応じてApp.jsファイルを変更できます。ブラウザウィンドウが更新されると、変更が反映されます。次のサンプルコードを使用できます。

次のサンプルコードは、Reactアプリケーションでチャートを使用する方法を示します。

JavaScript	Copy Code
import React from 'react'; import './App.css'; import GC from '@grapecity/spread-sheets'; import { SpreadSheets, Worksheet } from '@grapecity/spread-sheets-react'; // チャートモジュールをインポートします。 import '@grapecity/spread-sheets-charts'; var SpreadJSKey = "xxx"; GC.Spread.Sheets.LicenseKey = SpreadJSKey; class App extends React.Component { constructor(props) { super(props); this.hostStyle = { width: '1100px', height: '800px' }; } // ワークブックのinitializedイベントを処理します。 workbookInit = (spread) => { this.setState({ spread: spread}); let chart_columnClustered, chart_columnStacked, chart_columnStacked100; // シートを取得します。 let sheetCharts = spread.getSheet(0); // シート名を設定します。 sheetCharts.name("Charts"); sheetCharts.suspendPaint(); //チャートに表示するデータを準備します。 sheetCharts.setValue(0, 1, "Q1"); sheetCharts.setValue(0, 2, "Q2"); sheetCharts.setValue(0, 3, "Q3"); sheetCharts.setValue(1, 0, "Mobile Phones"); sheetCharts.setValue(2, 0, "Laptops"); sheetCharts.setValue(3, 0, "Tablets"); for (var r = 1; r <= 3; r++) { for (var c = 1; c <= 3; c++) { sheetCharts.setValue(r, c, parseInt(Math.random() * 100)); } } // columnClusteredチャートを追加します。 chart_columnClustered = sheetCharts.charts.add('chart_columnClustered', GC.Spread.Sheets.Charts.ChartType.columnClustered, 5, 150, 300, 300, "A1:D4"); chart_columnClustered.title({ text: "Annual Sales" }); // columnStackedチャートを追加します。 chart_columnStacked = sheetCharts.charts.add('chart_columnStacked', GC.Spread.Sheets.Charts.ChartType.columnStacked, 320, 150, 300, 300, "A1:D4"); chart_columnStacked.title({ text: "Annual Sales" }); // columnStacked100チャートを追加します。 chart_columnStacked100 = sheetCharts.charts.add('chart_columnStacked100', GC.Spread.Sheets.Charts.ChartType.columnStacked100, 640, 150, 300, 300, "A1:D4"); chart_columnStacked100.title({ text: "Annual Sales" }); sheetCharts.resumePaint(); } render() { return ( <div> <SpreadSheets backColor={this.spreadBackColor} hostStyle={this.hostStyle} workbookInitialized={this.workbookInit}> <Worksheet> </Worksheet> </SpreadSheets> </div> ) } } export default App;

JavaScript

Copy Code

import React from 'react';
import './App.css';
import GC from '@grapecity/spread-sheets';
import { SpreadSheets, Worksheet } from '@grapecity/spread-sheets-react';

// チャートモジュールをインポートします。
import '@grapecity/spread-sheets-charts';

var SpreadJSKey = "xxx";
GC.Spread.Sheets.LicenseKey = SpreadJSKey;

class App extends React.Component

{
constructor(props)

{
        super(props);
        this.hostStyle =
            {
                width: '1100px',
                height: '800px'
            };
}

// ワークブックのinitializedイベントを処理します。
workbookInit = (spread) =>

{
this.setState({
spread: spread});
let chart_columnClustered, chart_columnStacked, chart_columnStacked100;

// シートを取得します。
let sheetCharts = spread.getSheet(0);

// シート名を設定します。
sheetCharts.name("Charts");
sheetCharts.suspendPaint();

//チャートに表示するデータを準備します。
sheetCharts.setValue(0, 1, "Q1");
sheetCharts.setValue(0, 2, "Q2");
sheetCharts.setValue(0, 3, "Q3");
sheetCharts.setValue(1, 0, "Mobile Phones");
sheetCharts.setValue(2, 0, "Laptops");
sheetCharts.setValue(3, 0, "Tablets");
for (var r = 1; r <= 3; r++)

{
for (var c = 1; c <= 3; c++) {
sheetCharts.setValue(r, c, parseInt(Math.random() * 100));
}
}

// columnClusteredチャートを追加します。
chart_columnClustered = sheetCharts.charts.add('chart_columnClustered', GC.Spread.Sheets.Charts.ChartType.columnClustered, 5, 150, 300, 300, "A1:D4");
chart_columnClustered.title({ text: "Annual Sales" });

// columnStackedチャートを追加します。
chart_columnStacked = sheetCharts.charts.add('chart_columnStacked', GC.Spread.Sheets.Charts.ChartType.columnStacked, 320, 150, 300, 300, "A1:D4");
chart_columnStacked.title({ text: "Annual Sales" });

// columnStacked100チャートを追加します。
chart_columnStacked100 = sheetCharts.charts.add('chart_columnStacked100', GC.Spread.Sheets.Charts.ChartType.columnStacked100, 640, 150, 300, 300, "A1:D4");
chart_columnStacked100.title({ text: "Annual Sales" });

sheetCharts.resumePaint();
}

render() {
return (
<div>
<SpreadSheets backColor={this.spreadBackColor} hostStyle={this.hostStyle} workbookInitialized={this.workbookInit}>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
)
}
}

export default App;